includesByState & включает фильтр, не работающий с ngClass

Question

Я создал образец приложения, используя угловой материал 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;
}

  <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']" - это директива углового маршрутизатора

У вас обоих есть один и тот же элемент.

С UI Router вы добавляете класс, когда состояние активно только с ui-sref-active="active".Но он у вас уже есть, и он не работает, поэтому я предполагаю, что в ваших зависимостях нет маршрутизатора пользовательского интерфейса. (см. Учебное пособие)

С помощью Angular router вы добавляете класс к элементу, когда состояние активно, с помощью routerLinkActive (см. Документ) .Он должен быть в том же элементе, что и директива routerLink.

Выберите один маршрутизатор и удалите другой.

Answer 2

Правильный синтаксис для использования ngClass в Angular2 +: [ngClass]

Также, чтобы избежать ошибки, как показано в комментариях

«Невозможно прочитать свойство», включающее «неопределенное».

Использовать оператор безопасной навигации (?.)

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