首页 文章

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

提问于
浏览 次
0

在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类 .

如果url是/ 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,        
        }
    ]
angular

2 回答

  • 0

    使用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;
    }
  });
 }
    回复于
  • 0

    您可以使用ngClass执行此操作：

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

    在 DetailHomeComponent 和 FutureComponent ：

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

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

    回复于

相关问题