Question

给出路由链接：

<li [routerLink]="['Main']"><a>Main page</a></li>

当路径与名为＆＃34; Main＆＃34;的路径匹配时，框架会自动分配类router-link-active。如果我想给它一个自定义类（可能没有在控制器中注入Location或任何其他服务）该怎么办？

Answer 1

AFAIK不直接支持。作为一种变通方法，您可以添加一个指令来检查是否设置了类router-link-active，并根据该指令添加/删除您的自定义类。

@Directive({
  selector: '[routerLink]')
export class RouterLinkReplaceClass {
  // add class `my-active` when `myActiveClass` is `true`
  @HostBinding('class.my-active') 

  // read `router-link-active` class state
  @Input('class.router-link-active') 

  myActiveClass: bool = false;
}

Plunker example

要使用它，只需将其添加到父组件的指令中即可。（未经测试）

Answer 2

我在an AngularClass project找到了处理这个问题的方法。查看自定义RouterDirective。似乎是一种处理这个问题的方法，但我还没有把它放到我的项目中。

在Angular 2中，如何为活动路由器链接分配自定义类？

2 个答案: