Jquery 语义用户界面下拉列表，带角4

我目前正在尝试实现一个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>

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

有什么想法吗？

试试这个：

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

---

我刚刚发现了我的错误，多亏了，您不能同时导入和使用脚本，所以基本上，我需要替换：

import * as jQuery from 'jquery';

借

---

到目前为止一切都正常：）

您是否为

jQuery

安装了打字功能，可能是它弄乱了网页的构建..？不，我只是通过npm安装了jQuery，谢谢您的回答，但我在您的代码片段中遇到了完全相同的错误。如果我从浏览器控制台触发该组件，则该组件可以工作，因此在触发指令事件时，似乎语义尚未加载…@您可以共享代码段url吗调试错误会更容易共享url是什么意思？plnkr？我的意思是如果你创造了一个普朗卡或小提琴！感谢您的时间，但是您的plunkar的主要区别在于您直接将语义ui js注入页面的头部，难道不能由webpack处理吗？

import * as jQuery from 'jquery';

declare var jQuery: any;