Angular 带ECSS的角度5动态导航栏

我的

类别

有此数据。。。当鼠标悬停在导航栏上的类别名称上时，我想显示相关的子类别

 categories =  [ { "title": "webdevelop", "sub": [ "php", "html" ] }, { "title": "androidDevelop", "sub": [ "python" ] } ]

我做了类似的事情，但如果我将鼠标悬停在类别名称上，所有子类别都将显示我试图使用动态名称来激活数据，但angular不接受如何解决此问题

<nav>
  <div class="nav-wrapper grey darken-3">
    <ul class="right hide-on-med-and-down second-nav">
      <li *ngFor="let cat of categories">
        <a>
          <span (mouseover)="hover($event)" class="dropdown-button" href="#!" data-activates=""
                data-beloworigin="true">{{ cat.title }}
          </span>
        </a>
      </li>
    </ul>
  </div>
</nav>
<!-- Dropdown -->
<ul *ngFor="let cat of categories" id="" class="dropdown-content collection">
  <li class="collection-item avatar" *ngFor="let sc of cat.sub">
      <span>
        {{ sc }}
      </span>
  </li>
</ul>

---

在angular中看到jQuery代码很奇怪。有没有办法在项目中避免jQuery？ 当前，您的

hover（）

只是将另一个悬停侦听器附加到导航栏，这是错误的。如果要保留jQuery，请尝试在

ngAfterViewInit（）

中附加所有侦听器。 但这里是我在不使用jQuery的情况下如何做到这一点的

<nav>
  <div class="nav-wrapper grey darken-3">
    <ul class="right hide-on-med-and-down second-nav">
      <li *ngFor="let cat of categories">
        <a>
          <span (mouseover)="hover($event, cat)" (mouseleave)="unhover($event)" class="dropdown-button" href="#!" data-activates=""
                data-beloworigin="true">{{ cat.title }}
          </span>
        </a>
      </li>
    </ul>
  </div>
</nav>
<!-- Dropdown -->
<div *ngIf="hoveredCategory">
<ul id="hoveredCategory" class="dropdown-content collection">
  <li class="collection-item avatar" *ngFor="let sc of hoveredCategory.sub">
      <span>
        {{ sc }}
      </span>
  </li>
</ul>
</div>

此代码将显示悬停类别的子类别，您只需注意下拉列表的样式化

<nav>
  <div class="nav-wrapper grey darken-3">
    <ul class="right hide-on-med-and-down second-nav">
      <li *ngFor="let cat of categories">
        <a>
          <span (mouseover)="hover($event, cat)" (mouseleave)="unhover($event)" class="dropdown-button" href="#!" data-activates=""
                data-beloworigin="true">{{ cat.title }}
          </span>
        </a>
      </li>
    </ul>
  </div>
</nav>
<!-- Dropdown -->
<div *ngIf="hoveredCategory">
<ul id="hoveredCategory" class="dropdown-content collection">
  <li class="collection-item avatar" *ngFor="let sc of hoveredCategory.sub">
      <span>
        {{ sc }}
      </span>
  </li>
</ul>
</div>

class ... {
  hoveredCategory: any;
  ...

  hover(event, category) {
    this.hoveredCategory = category;
  }
  unhover(event) {
    this.hoveredCategory = null;
  }