我目前正在嘗試實現一個Angular指令來管理語義UI下拉菜單。首先,我通過npm使用Angular(4.3.3),jQuery(3.2.1)和Semantic UI(2.2.13)。Angular 4的語義UI下拉
爲了整合他們,我已經重新配置的角度,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一下,並試圖很多替代品,但沒有成功...
有什麼想法?
你安裝'jQuery'的打字,也許它搞亂了webpack構建..? –
不,我只是簡單地通過npm安裝jQuery,這都是 – egeloen