角度2活动路线在单一路线上

Question

说我有以下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 这样的指定路径，我的两个链接都变为红色（受活动类影响）但是它们只适用于完全当我点击链接时，路径就是激活。

以上网址是用户链接引用的。

Answer 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;
        }
      }
    })
}