Question

我想删除一个只有一个路由的类，（或者在所有BUT路径上添加一个类。）这怎么可能？我试过带有多个参数的[routerLink]无济于事：

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

或者，有没有[routerLinkNOTActive]或类似的东西：

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

所以，那么它会添加＆＃39; col-sm-9＆＃39;在所有不是＆＃39; / home＆＃39;的路线上课。看起来非常简单，但无法找到任何可以做到的事情。

Answer 1

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

在您的模板中，

<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' : '';
}

你可以玩得开心，并测试你想要的任何路线组合。

Answer 2

这是我使用[class]属性的最终解决方案。顺便说一句，Angular2中的[ng-class]属性发生了什么？：

HTML：

<div class='body-content' [class]="bodyContentClass()" > 
    <router-outlet></router-outlet>
</div>

打字稿：

import {Location} from '@angular/common';
...
constructor(private authService: AuthService,private location: Location) { }
...
bodyContentClass()
{
    // router  is an instance of Router, injected in the constructor
   var viewLocation = location.pathname; 
   return viewLocation == '/counter' || viewLocation == '/fetch-data' ? 'col-sm-9' : '';
}

Angular 2 routerlink有多条路由？

2 个答案: