Question

在Angular 2+中，如果我在“文章”功能模块中设置了这样的导航栏：

    <li>
      <a routerLinkActive="active" routerLink="current">Current</a>
    </li>

    <li>
      <a routerLinkActive="active" routerLink="future">Future</a>
    </li>

然后当我导航到/ articles / current或/ articles / future时，设置了正确的routerLinkActive类。

如果网址为/ articles / article-slug，如何将routerlinkActive设置为“Future”链接？

即;即使我在article-slug（这是DetailHomeComponent）中，我希望文本'Future'出现在'active'类中

我没有显示CurrentComponent，但它包含一个包含以下路径的项目列表：

<a [routerLink]="['/articles', article.slug]">

这些是我的路线：

    path: '', 
    component: MenuComponent,
    children: [
        {
            path: '', redirectTo: 'current',  pathMatch: "full" 
        },
        {
            path: 'current', component: CurrentComponent,
        },
        {
            path: 'future', component: FutureComponent,
        },
        {
            path: ':slug', 
            component: DetailHomeComponent,        
        }
    ]

Answer 1

您可以使用ngClass：

执行此操作

<li>
  <a routerLink="future"
     [ngClass]="{'active': myService.enableFutureLink}">
     Future
  </a>
</li>

DetailHomeComponent和FutureComponent：

constructor(private myService: MyService) {
    myService.enableFutureLink = true;
}

MyService是一种服务，您可以使用它来传达两个组件。作为替代方案，您可以使用路由器来了解当前激活的路由。

Answer 2

使用ngClass并订阅激活的路线并为所需的路线设置变量我们可以实现这一目标。

<li>
<a routerLinkActive="active"
[ngClass]= "{'active': enableFuture}"
routerLink="future">Future</a>
</li>

在TS中： -

enableFuture: false;
 constructor(private route: ActivatedRoute) {}
 ngOnInit() {
 this.route.params.subscribe(params => {
    if(params['slug']){
     this.enableFuture = true;
    }else{
     this.enableFuture = false;
    }
  });
 }

使`routerLinkActive`对两个不同的组件

2 个答案: