Angular ngClass最佳实践中的角度参考id

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

html:

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

我希望能够编写

[ngClass]

来检查id属性，而不仅仅是将id作为硬编码字符串

如果我手动更改地址，此代码将失败并将主页显示为活动页面，因为它是默认的-如何修复此问题

---

路由器

将帮助您实现预期行为

家


占位符

从'@angular/core'导入{Component}；
从'@angular/Router'导入{Router，NavigationEnd}；
从“rxjs/operators”导入{filter，map}；
@组成部分({
选择器：“我的应用程序”，
templateUrl:“./app.component.html”，
样式URL:['./app.component.css']
})
导出类AppComponent{
currentTab=''；
只读路由={
主页：'/home'，
占位符：'/placeholder'
};
构造函数（专用路由器：路由器）{
这是路由器事件
.烟斗(
过滤器（e=>e导航结束实例），
地图（（e:NavigationEnd）=>e.url）
)
.subscribe（newUrl=>{
this.currentTab=newUrl；
});
}
}

---

您可以检查它是如何工作的

1

id

标签的

属性？2.如果手动更改页面地址，您希望发生什么情况？比这更好的方法是，它不是基于id，而是基于/someAddress，或者更好的做法是什么

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

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