Question

我在html文件中使用routerLinkActive="active" routerLink=[myId]来突出显示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"不再有效/突出显示。< / p>

示例：

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

您问如何突出显示链接作为点击结果。这种方法不太理想：您可能最终突出显示链接之前实际激活新路由/页面。最重要的是，如果用户重新加载页面或直接导航到页面，因为他们为其添加了书签，链接将永远不会突出显示（因为没有人点击它）。

您需要找到一种方法来突出显示基于应用状态的链接，而不是作为操作的结果（典型的流程是：action =＆gt;更改状态=＆gt;更新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源代码中的当前路径。

Angular 2 - 在TypeScript（.ts）文件中，routerLinkActive =“active”的含义是什么？

1 个答案: