javascript - 使用语义 UI 时，Jquery 无法在 Angular 4+ 中工作

Question

我正在尝试在我的 Angular 项目中实现语义用户界面下拉菜单，当我单击下拉菜单时出现错误。我已经通过 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 步:更改 dropdown() 调用

从此:

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 repository我本地的工作示例。检查并尝试。