angular - includedByState & includes 过滤器不适用于 ngClass

Question

我使用 Angular 7 Material 创建了一个示例应用程序。为了突出显示所选的导航，我使用了 active 类。当我使用 5 个 li 元素突出显示所选元素时，使用 $state 过滤器动态使用 ngClass 和状态过滤器 includedByState 和 $state。单独包含，但不起作用。

我需要这样的用户界面

sample application

CSS

.navigation-items {
  list-style-type: none;
  padding: 0;
  margin: 0;
  width: 100%;
}

li {
  float: left;
  padding-right: 5%;
  padding-left: 5%;
  min-width: 10%;
}

li.active::after {
  content: " ";
  opacity: 1;
  top: 12%;
  left: 8%;
  position: absolute;
  border: 18px solid transparent;
  border-bottom-color: #ccd7de;
}

  <ul class="navigation-items nav nav-tabs">
    <li ui-sref-active="active" ng-class="{ active: ('home' | includedByState) }">
      <a [routerLink]="['/home']" data-toggle="tab" ui-sref="home" title="Home">
        <mat-icon class="one">home</mat-icon>
      </a>
    </li>
    <li ui-sref-active="active" ng-class="{active: $state.includes('myapp') }">
      <a
        [routerLink]="['/myapp']"
        data-toggle="tab"
        ui-sref="myapp"
        title="My Application"
      >
        <mat-icon class="two">assignment</mat-icon>
      </a>
    </li>
    <li ui-sref-active="active" ng-class="{active: $state.includes('myContact') }">
      <a
        [routerLink]="['/myContact']"
        data-toggle="tab"
        ui-sref="myContact"
        title="My Contact"
      >
        <mat-icon class="three">folder_open</mat-icon>
      </a>
    </li>
    </ul>

Answer 1

那里有两个路由器实现。一个是 Angular路由器，第二个是 UI Router .

• ui-sref="myapp" 是 UI Router 指令
• [routerLink]="['/myapp']" 是 Angular 路由指令

您将它们都放在同一个元素上。

使用 UI Router，您可以在状态激活时添加类，只需使用 ui-sref-active="active"。但是你已经有了它并且它不工作，所以我假设你的依赖项中并没有真正的 UI 路由器。 (see the tutorial)

使用 Angular 路由器，当状态为 routerLinkActive 时，您可以将类添加到元素 (see doc) .它必须与 routerLink 指令位于同一元素上。

选择一个路由器并移除另一个。