语义-UI 下拉菜单 Angular 4

Question

我目前正在尝试实施 Angular 指令来管理语义 UI 下拉菜单。首先，我通过 npm 使用 Angular (4.3.3)、jQuery (3.2.1) 和语义 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()

我已经 google 它并尝试了很多替代方案但没有成功...

有什么想法吗？

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

Answer 2

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

import * as jQuery from 'jquery';

来自

declare var jQuery: any;

到目前为止一切正常:)

语义-UI 下拉菜单 Angular 4

Semantic-UI Dropdown with Angular 4

jquery

semantic-ui

angular