Question

我正在尝试在我的角度项目中实现semantic-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>

我的app.component：

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();
  }
}

My 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： Package.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 repository。退房并尝试。

Answer 2

Use declare key
declare var jquery:any;
declare var $ :any;

看看这个网址。 How to use jQuery Plugin with Angular 4?

使用semanti-ui时，Jquery无法使用角度4+

2 个答案: