Angular 2 routerlink有多条路由? [英] Angular 2 routerlink with multiple routes?

问题描述

我只想删除一个路由类(或者在所有但一个路由中添加一个类).那怎么可能呢?我尝试了[routerLink]，但没有多个参数:

I want to remove a class only one ONE route, (Or add a class on all BUT one route.) How is that possible? I have tried [routerLink] with multiple parameters to no avail:

 <div class='body-content' [routerLink]="['/fetch-data', '/counter']" [routerLinkActive]="['col-sm-9']"  > 
        <router-outlet></router-outlet>
    </div>

或者，是否存在诸如[routerLinkNOTActive]之类的东西:

Or, is there such a thing as [routerLinkNOTActive] or something similar like so:

<div class='body-content' [routerLink]="['/home']" [routerLinkNotActive]="['col-sm-9']"> 

因此，那么它将在非"/home"的所有路由上添加"col-sm-9"类.看起来很简单，但是却找不到任何东西.

so, then it would add the 'col-sm-9' class on all routes that are not '/home'. Seems very simple, but can't find anything to do it.

推荐答案

我不知道是否有内置指令可以执行您想要的操作，但是您始终可以向组件中添加一些逻辑.

I don't know if there is a built in directive to do what you want but you can always add some logic to your component.

在您的模板中，

<div class='body-content' [routerLink]="['/fetch-data', '/counter']" [class]="bodyContentClass()"> 

在您的组件中，

bodyContentClass() {
  // router  is an instance of Router, injected in the constructor
  return this.router.isActive('/url-to-make-body-active') || this.router.isActive('/other-url-to-make-body-active') ? 'col-sm-9' : '';
}

您可以尽情玩乐，并根据自己想要的路线进行测试.

You can have fun and test against whatever combination of routes you wish.

这篇关于Angular 2 routerlink有多条路由?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！