角度 2 活动路线在单条路线上答案

【问题标题】：angular 2 active route is on single route角度 2 活动路线在单条路线上
【发布时间】：2017-04-26 12:43:44
【问题描述】：

假设我有以下 html 指定不同部分的链接。

<a [routerLink]="['/']" [queryParams]="{'Analytics':700}" routerLinkActive="active" [routerLinkActiveOptions]="{exact:false}">Home</a>
      <input type="text" #id (input)="0"/>
      <a [routerLink]="['user',id.value]" [queryParams]="{'Analytics':500}" routerLinkActive="active" [routerLinkActiveOptions]="{exact:false}">User</a>

      <button type="button" class="btn btn-default" (click)="onNavigate()">click me</button>

      <hr>

我期望的是，对于像 /user/15/edit 这样的给定路径，我的两个链接都变成了红色（受活动类影响），但它们仅适用于 exact 当我点击链接时，路径就会被激活。

上面的url是User链接所引用的。

【问题讨论】：

我不明白，您是否希望您的两个链接都“活跃”，即使您只点击其中一个？
是的！默认情况下，必须根据起始url来决定活动链接。

标签： angular routing routes angular2-routing

【解决方案1】：

在这种情况下，您可以使用ngClass 添加基于某些路由逻辑的活动类。这是 routerLinkActive 所做的某种形式或形式。所以你可以这样做：

<a [routerLink]="['/']" [queryParams]="{'Analytics':700}" [ngClass]="{ 'active' : isMyRoute }">Home</a>

并且在您的组件中使用Router 和ActivatedRoute 通过遍历显示在路由器出口中的路由树来检查组件名称，并基于此切换变量：

import {ActivatedRoute, NavigationEnd, Router} from '@angular/router';
... 
public isMyRoute: boolean;

constructor(private router: Router, private route: ActivatedRoute) {}

ngOnInit() {
    this.router.events.subscribe(res => {
      if (res instanceof NavigationEnd) {
        let fn = this.route.children[0].component;
        let componentName = fn['name'];

        if (componentName === 'UserEditComponent') {
          this.isMyRoute = true;
        } else {
          this.isMyRoute = false;
        }
      }
    })
}

【讨论】：