角度2主動路由在單個路由上

說我有以下html指定不同部分的鏈接。角度2主動路由在單個路由上

<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是用戶鏈路是指。

來源

2017-04-26 Masood Moghini

我不明白，你是否希望你的兩個鏈接都「有效」，即使你只點擊其中的一個？ – Yeysides

是的！默認情況下必須是主動鏈接必須基於起始url決定的情況。 –

在這種情況下，您可以使用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; 
     } 
     } 
    }) 
}

來源

2017-04-27 16:06:38 Yeysides

角度2主動路由在單個路由上

回答

相關問題