语义 UI 指向下拉菜单在 Angular 2 中无法正常工作

Question

我试图做一个指向下拉菜单，正如 Semantic UI 的文档所说的那样，但是当我点击时它没有向侧面打开，我可能遗漏了一些东西，你们能帮帮我吗？

<pre>
<div class="ui vertical menu">
  <div class="header item">
    Exemplos
  </div>
  <div class="ui left pointing dropdown link item">
    <i class="dropdown icon"></i>
    Imagem
    <div class="menu">
      <div class="item" routerLink="images" 
            RouterLinkActive="active">Reconhecimento de Objetos</div>
      <div class="item">Reconhecimento Facial</div>
    </div>
  </div>
</div>
</pre>

Answer 1

语义 UI 下拉模块需要一些 JavaScript 才能正常工作。要让菜单显示，您可以使用 Angular 执行必要的 Javascript 工作。

<div class="ui vertical menu">
  <div class="header item">
    Exemplos
  </div>
  <div class="ui left pointing dropdown link item" ngClass="{'visible': showMenu, 'active': showMenu}">
    <i class="dropdown icon" (click)="showMenu = !showMenu"></i>
    Imagem
    <div class="menu" ngClass="{'visible': showMenu, 'hidden': !showMenu}">
      <div class="item" routerLink="images" 
            RouterLinkActive="active">Reconhecimento de Objetos</div>
      <div class="item">Reconhecimento Facial</div>
    </div>
  </div>
</div>

这不会应用具有适当时间的类来执行语义 UI 提供的动画。为此，您必须加载必要的 js 库（jQuery 和语义 js 文件）并让它们与 Typescript 很好地配合。