Angular 4的语义UI下拉

Question

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

的问题是，它总是与结束：

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

我注意到在创建浏览器控制台下拉（抛出错误后）的工作原理：

$('.dropdown').dropdown() 

我已经google一下，并试图很多替代品，但没有成功...

有什么想法？

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

Working Plunkar Link