角度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> 

は、彼らはただあるだけ正確なパスのために働くしかし/ユーザー/ 15 /編集などの指定したパスのため私の両方のリンク（アクティブクラスの影響を受けている）赤色になったということです非常リンクをクリックすると、が有効になりますです。

上記のURLは、ユーザーがリンクを参照していることです。

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