带有角4的语义-UI下拉列表

Question

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

为了集成它们，我重新配置了角-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>

问题是，它总是以以下方式结束：

错误WEBPACK_IMPORTED_MODULE_1_jquery(...).dropdown :TypeError不是一个函数

我注意到在浏览器控制台中创建下拉列表(在抛出错误之后)是有效的：

$('.dropdown').dropdown()

我已经在谷歌上搜索过了，尝试了很多选择，但都没有成功.

有什么想法吗？

Answer 1

我发现了我的错误，多亏了https://github.com/angular/angular-cli/issues/5944#issuecomment-299430703，您不能同时导入和使用脚本，所以基本上，我需要替换：

import * as jQuery from 'jquery';

通过

declare var jQuery: any;

到目前为止，一切都很顺利:)

Answer 2

试试这个：

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

工作Plunkar Link