Question

我是Jhipster和Angular的新手，并且正在为我的Jhipster Angular项目添加jquery实例而苦苦挣扎。

我只需要更改默认jhipster应用程序的主题和外观。为此，我下载了一个结合了jquery和bootstrap的主题，因此，我通过npm在jhipster项目中安装了jquery。

我也可以在node_modules中看到它的文件夹，因此它已经可用。

即使我已将其链接添加到vendor.ts中，但似乎没有被加载。所以这是我要导入jquery文件的vendor.ts代码

import 'jquery/dist/jquery.min.js';

为了测试我的jquery对象，我在home.component.ts文件中编写了以下代码。

import { Component, OnInit } from '@angular/core';
import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
import { JhiEventManager } from 'ng-jhipster';
import { LoginModalService, AccountService, Account } from 'app/core';

declare var $: any;
@Component({
    selector: 'jhi-home',
    templateUrl: './home.component.html',
    styleUrls: ['home.css'],
})
export class HomeComponent implements OnInit {
    account: Account;
    modalRef: NgbModalRef;

    constructor(
        private accountService: AccountService,
        private loginModalService: LoginModalService,
        private eventManager: JhiEventManager
    ) {}

    ngOnInit() {

        alert('I am Called');

        $(document).ready(function() {
            alert('I am Called From jQuery');
        });


    }

但是页面加载后却给我一个错误

ERROR ReferenceError: $ is not defined
    at HomeComponent.ngOnInit

关于此事的任何提示都是非常可取的。

编辑：我正在添加我的angular.json代码

{

"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
    "paperproject": {
        "root": "",
        "sourceRoot": "src/main/webapp",
        "projectType": "application",
        "architect": {}
    }

},
"defaultProject": "paper-auth",
"cli": {
    "packageManager": "npm"
},
"schematics": {
    "@schematics/angular:component": {
        "inlineStyle": true,
        "inlineTemplate": false,
        "spec": false,
        "prefix": "jhi",
        "styleExt": "css"
    },
    "@schematics/angular:directive": {
        "spec": false,
        "prefix": "jhi"
    },
    "@schematics/angular:guard": {
        "spec": false
    },
    "@schematics/angular:pipe": {
        "spec": false
    },
    "@schematics/angular:service": {
        "spec": false
    },
    "scripts": "./node_modules/jquery/dist/jquery.min.js"
}
}

它没有任何脚本属性，因此我添加了脚本属性，但仍然无法正常工作。 Jhipster向导仅创建此默认angular.json文件。我添加了

  "scripts": "./node_modules/jquery/dist/jquery.min.js"

Answer 1

尝试一下：

npm我jquery-保存

在TypeScript文件中：

AssetFileDescriptor afd = mAssetManager.openFd(soundName);

或

在index.html中添加jquery脚本

C:\Users\**your-user-name**\AppData\Local\Android\Sdk\platform-tools

在TypeScript文件上：

Tools> SDK Manager> Android SDK> SDK Tools

Answer 2

jQuery将自身写入window。$，或者如果您使用jQuery.noConflict（），它将出现在window.jQuery中，因此您可以在网站上使用$或jQuery。它不会导出对象。

要在Angular项目中使用jQuery，请将jQuery实施到您的scripts的{{1}}部分中（对于Angular 6和7或在较旧的项目（Angular 2-5）./angular.json中）。

搜索./angular-cli.json

并替换为

"scripts": []

然后您就可以在代码中以jQuery的形式访问$。

Answer 3

为什么只需要使用jquery来更改主题？不要使用它，仅与CSS一起愉快地使用，bootstrap在angular中使用ng-bootstrap，而不是bs小部件的jquery，主题只是css。不再需要jquery。无论如何，jhipster主题都是基于bootswatch bs主题集合，there解释了如何仅用一行即可更改css主题。如果需要更多自定义，则可以编写自己的CSS主题，这并不困难。

在Jhipster角度项目中添加jquery

3 个答案: