Jquery 在使用 semanti-ui 时不能以 angular 4+ 工作

Question

我正在尝试在我的 Angular 项目中实现语义 ui 下拉菜单，但在单击下拉菜单时出现错误。我已经通过 npm 安装了 semantic-ui 和 jquery，并将脚本和样式包含在我的 angular-cli 中。

我的html代码：

<div class="ui selection dropdown field">
<input type="hidden" name="operator">
<i class="dropdown icon"></i>
<div class="default text">+</div>
<div class="menu">
  <div class="item" data-value="0">+</div>
  <div class="item" data-value="1">-</div>
  <div class="item" data-value="2">*</div>
  <div class="item" data-value="3">/</div>
</div>

我的应用程序组件：

import {Component, OnInit} from '@angular/core';

import * as $ from 'jquery';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  ngOnInit(): void {
    $('.ui.dropdown')
       .dropdown();
  }
}

我的 angular-cli :

"styles": [
    "styles.css",
    "../node_modules/bootstrap/dist/css/bootstrap.min.css",
    "../node_modules/semantic-ui/dist/semantic.min.css"
  ],
  "scripts": ["../node_modules/jquery/dist/jquery.js",
    "../node_modules/bootstrap/dist/js/bootstrap.min.js",
    "../node_modules/semantic-ui/dist/semantic.min.js"
  ],

我的错误：

请帮忙

编辑-1： 包.json：

{
  "name": "wow-some.1",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
   },
  "private": true,
  "dependencies": {
     "@angular/animations": "^5.2.0",
     "@angular/common": "^5.2.0",
     "@angular/compiler": "^5.2.0",
     "@angular/core": "^5.2.0",
     "@angular/forms": "^5.2.0",
     "@angular/http": "^5.2.0",
     "@angular/platform-browser": "^5.2.0",
     "@angular/platform-browser-dynamic": "^5.2.0",
     "@angular/router": "^5.2.0",
     "bootstrap": "^4.0.0",
     "core-js": "^2.4.1",
     "jquery": "^3.3.1",
     "rxjs": "^5.5.6",
     "semantic-ui": "^2.2.13",
     "zone.js": "^0.8.19"
   },
    "devDependencies": {
    "@angular/cli": "1.6.5",
    "@angular/compiler-cli": "^5.2.0",
    "@angular/language-service": "^5.2.0",
    "@types/jasmine": "~2.8.3",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "^4.0.1",
    "jasmine-core": "~2.8.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~2.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~4.1.0",
    "tslint": "~5.9.1",
    "typescript": "~2.5.3"
    }
 }

Answer 1

第 1 步：安装 jquery 类型

npm install @types/jquery --save

第 2 步：更改您的 jquery 导入

来自这里：

import * as $ from 'jquery';

对此：

import 'jquery';

第 3 步：更改下拉列表（）调用

来自这里：

ngOnInit(): void {
    $('.ui.dropdown').dropdown();
  }

对此：

ngOnInit(): void {
    (<any>$('.ui.dropdown')).dropdown();
  }

您应该在 .angular-cli.json 中导入以下样式和脚本：

"styles": [
  "../node_modules/bootstrap/dist/css/bootstrap.min.css",
  "../node_modules/semantic-ui/dist/semantic.min.css",
  "styles.css"
],
"scripts": [
  "../node_modules/jquery/dist/jquery.js",
  "../node_modules/bootstrap/dist/js/bootstrap.min.js",
  "../node_modules/semantic-ui/dist/semantic.min.js"
],

现在应该可以了。

这里是我本地工作示例的 github 存储库。检查并尝试。

Answer 2

使用声明键
声明 var jquery:any;
声明 var $ :any;

看看这个网址。 如何在 Angular 4 中使用 jQuery 插件？

Answer 3

第一步：安装 jquery 类型

npm install @types/jquery --save

第二步：在脚本中设置文件angular.json 文件

    "scripts": [
  "node_modules/jquery/dist/jquery-3.6.4.min.js"
]

第三步：在tsconfic.app.json文件中插入类型

"types": ["jquery"]

第四步：导入example.component.ts

import * as $ from 'jquery'

第五步：尝试使用 jquery