jquery - Angular 4 的语义 UI 下拉菜单

Question

我目前正在尝试实现一个 Angular 指令来管理语义 UI 下拉列表。首先，我通过 npm 使用 Angular (4.3.3)、jQuery (3.2.1) 和 Semantic UI (2.2.13)。

为了集成它们，我重新配置了 angular-cli.json 以导入这些库:

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

声明语义 UI 指令:

import {Directive, ElementRef, AfterViewInit} from "@angular/core";
import * as jQuery from "jquery";

@Directive({
  selector: "[sm-dropdown]"
})

export class SemanticDropdownDirective implements AfterViewInit {

  constructor(private dropdown: ElementRef) {}

  ngAfterViewInit(): void {
    jQuery(this.dropdown.nativeElement).dropdown();
  }
}

并尝试一下:

<div class="ui selection dropdown" sm-dropdown>
  <i class="dropdown icon"></i>
  <div class="menu">
    <div 
      class="item" 
      *ngFor="let item of [10, 20, 30, 50, 100]" 
      [attr.data-value]="item"
    >
      {{ item }}
    </div>
  </div>
</div>

问题是它总是以:

ERROR TypeError: WEBPACK_IMPORTED_MODULE_1_jquery(...).dropdown is not a function

我注意到在浏览器控制台中创建一个下拉菜单(抛出错误后)可以工作:

$('.dropdown').dropdown()

我已经用谷歌搜索它并尝试了很多替代方案，但没有成功......

有什么想法吗？

Answer 1

试试这个:

import {Directive, ElementRef, AfterViewInit} from "@angular/core";
import * as $ from 'jquery';

declare var $: any;

@Directive({
  selector: "[sm-dropdown]"
})

export class SemanticDropdownDirective implements AfterViewInit {

  constructor(private dropdown: ElementRef) {}

  ngAfterViewInit(): void {
    $(this.dropdown.nativeElement).dropdown();
  }
}

Working Plunkar Link