Angular 参考 ngClass 最佳实践中的 id

Question

我编写此代码是为了在活动页面更改时更改导航栏选项的 css。

html:

   <ul>
        <li routerLink="/" id="homePage" (click)="selected($event)"
            [ngClass]="{'default': activePage=='homePage', 'active': activePage!=='homePage' }">Home
        </li>

        <li id="placeholder" routerLink="/placeholder" (click)="selected($event)"
            [ngClass]="{'default': activePage=='placeholder', 'active':  activePage!=='placeholder' }">PlaceHolder
        </li>
    </ul>

TS:

  public selected($event) {
    var target = event.target || event.srcElement || event.currentTarget;
    this.activePage = target["id"];
  }

但我有两个问题无法解决：

我希望能够编写 [ngClass] 来检查 id 属性，而不仅仅是作为硬编码字符串的 id
如果我手动更改地址，此代码将失败并将主页显示为活动页面，因为它是默认设置 - 我该如何解决这个问题？

Answer 1

Router 将帮助您实现预期的行为。

<ul>
  <li [routerLink]="routes.home"
      [ngClass]="{ 'activated': currentTab === routes.home}">
    Home
  </li>
  <li [routerLink]="routes.placeholder"
      [ngClass]="{ 'activated': currentTab === routes.placeholder}">
    PlaceHolder
  </li>
</ul>
<router-outlet></router-outlet>

import { Component } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { filter, map } from 'rxjs/operators';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent {

  currentTab = '';

  readonly routes = {
    home: '/home',
    placeholder: '/placeholder'
  };

  constructor(private router: Router) {
    this.router.events
      .pipe(
        filter(e => e instanceof NavigationEnd),
        map((e: NavigationEnd) => e.url)
      )
      .subscribe(newUrl => {
        this.currentTab = newUrl;
    });
  }
}

您可以查看它的工作原理here

Angular 参考 ngClass 最佳实践中的 id

Angular reference id in ngClass best practices

ng-class

angular