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