Question

我的categories有这些数据...当鼠标悬停在导航栏上的类别名称时显示相关的子类别

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

我做了类似这样的事情，但如果我将鼠标悬停在类别名称上，所有子类别将显示我试图使用data-activates的动态名称但角度不接受我如何解决此问题？

<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>

它是悬停功能：

 hover() {
    $('.dropdown-button').dropdown({
        inDuration: 300,
        outDuration: 225,
        hover: true, // Activate on hover
        belowOrigin: true, // Displays dropdown below the button
        alignment: 'right' // Displays dropdown with edge aligned to the left of button
      }
    );
  }

Answer 1

奇怪的是看到角度内的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>

然后更新悬停方法和组件类

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

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

此代码将显示悬停类别的子类别，您只需要处理下拉列表的样式化。

带有materializecss的angular 5动态导航栏

1 个答案: