Question

我使用angular 7材质创建了一个示例应用程序。为了突出显示所选的导航，我使用了活动课堂。当我使用5个li元素突出显示所选的一个元素时，分别使用$state和ngClass以及状态过滤器includedByState和$state.includes来动态使用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; }过滤器，但这是行不通的。

我需要这样的UI

sample application

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

{{1}}

Answer 1

在Angular2 +中使用ngClass的正确语法为[ngClass]

还要避免出现注释中所示的错误

“无法读取未定义的属性'includes'。

使用安全的导航操作符（？。）

 <li ui-sref-active="active" [ngClass]="{active: $state?.includes('myapp') }">

Answer 2

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

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

你们两个都在同一个元素上。

使用UI路由器，您可以仅在ui-sref-active="active"处于活动状态时添加类。但是您已经在那儿了，并且它不起作用，所以我认为您的依赖项中确实没有UI路由器。 (see the tutorial)

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

选择一个路由器，然后删除另一个。

includedByState和包含过滤器不适用于ngClass

2 个答案: