角度2-TypeScript（.ts）文件中的routerLinkActive =“ active”等效吗？

Question

我在带有routerLink=[myId]的html文件中使用routerLinkActive="active"突出显示了ul中的活动锚。

例：

<a [routerLink]="[myId]" class="list-group-item clearfix" routerLinkActive="active">
  <div class="pull-left">
    <h4 class="list-group-item-heading">{{someName}}</h4>
  </div>
</a>

但是，当我删除[routerlink]="[myId]"并将其替换为点击侦听器时（会进行一些计算，然后使用this.router.navigate(['/someURL', myId])重定向路由） routerLinkActive="active"不再起作用/突出显示。

例：

<a (click)="onClick(myId)" class="list-group-item clearfix" routerLinkActive="active">
  <div class="pull-left">
    <h4 class="list-group-item-heading">{{someName}}</h4>
  </div>
</a>

使用routerLink=[myId]检查锚元素时，样式设置为：

.list-group-item.active, .list-group-item.active:focus, .list-group-item.active:hover {
    z-index: 2;
    color: #fff;
    background-color: #337ab7;
    border-color: #337ab7;
}

是否可以在onClick()函数的.ts文件中设置活动锚样式？ 还是有解决这个问题的更简单方法？

Answer 1

在导航中突出显示特定链接反映了应用程序的当前状态 ：链接A被突出显示是因为用户正在查看页面A。

您在问如何通过单击突出显示链接。 这种方法不太理想：您可能最终会在实际激活新路线/页面之前突出显示链接。 最重要的是，如果用户由于添加了书签而重新加载该页面或直接导航至该页面，则该链接将永远不会突出显示（因为没有人单击它）。

您需要找到一种方法来突出显示基于应用程序状态的链接，而不是作为操作的结果（典型流程是：操作=>更改状态=>更新UI）。

也许是这样的：

@Component({
  template: `
    <a [class.active]="currentPath == 'home'">HomeComponent</a>
  `
})
export class HomeComponent {
  currentPath = '';
  constructor(route: ActivatedRoute) {
    // Retrieve current path.
    this.currentPath = snapshot.url.join('');
  }
}

想法是检索当前路径并将其公开给模板。

就像Günter建议的那样，您可能会在routerLinkActive的源代码中找到更强大的代码来测试当前路径。