角2根的路線始終處於活動狀態

最近我讀了this useful article about Angular 2 Router，看着the demo。一切似乎都很完美。但是，當我嘗試根據router-link-active類來確定活動路由時，我發現根路由始終處於活動狀態。角2根的路線始終處於活動狀態

這裏是一塊app.component.ts的代碼，其中「主」路線被配置：

@Component({ 
    selector: 'demo-app', 
    template: ` 
    <a [routerLink]="['/']">Home</a> 
     <a [routerLink]="['/about']">About</a> 
    <div class="outer-outlet"> 
     <router-outlet></router-outlet> 
    </div> 
    `, 
    // add our router directives we will be using 
    directives: [ROUTER_DIRECTIVES] 
}) 
@Routes([ 
    // these are our two routes 
    { path: '/', name: 'Home', component: HomeComponent }, // , useAsDefault: true}, // coming soon 
    { path: '/about', name: 'About', component: AboutComponent } 
]) 
export class AppComponent { }

如果我改變到<a [routerLink]="['/home']">Home</a>默認組件（從'/'到'/home'和<a [routerLink]="['/']">Home</a>路徑必須是HomeComponent）消失。 HomeComponent只有在鏈接被點擊後纔會被激活，並且每當我們改變到另一個路線時，router-link-active將被正確添加和刪除。

這是一個錯誤還是路由配置有問題？

來源

2016-06-09 asubanovsky

此鏈接可能是你感興趣的https://github.com/angular/angular/issues/8397 – yurzui

嗨@yurzui，感謝您的鏈接。這非常有幫助。原來，這就是Angular 2路線的作用方式。所以我必須做我自己的解決方法.. :( – asubanovsky

yurzui s鏈接似乎是關於新的路由器。對於測試版和RC.1'@ angular/router-deprecated' https://github.com/angular/angular/issues/5334似乎是相關的問題。 –

作品添加以下屬性到你家的錨爲我工作。 [routerLinkActiveOptions]="{ exact: true }"

來源

2016-10-17 23:24:46

感謝您的領導對於其他尋找這個，這裏是這個功能的官方文檔：https：//angular.io/docs/ts/latest/api/router/index/RouterLinkActive-directive.html – Martin

對我而言，這不是一個錯誤，您需要爲/或未知路徑設置備用組件。（最有可能HomeComponent）

@Routes([ 
    { path: '/home', component: HomeComponent }, 
    { path: '/about', component: AboutComponent }, 
    { path: '*', name: component: HomeComponent } 
]);

這雖然是使用新的Router模塊（未棄用的一個），並在rc.0和rc.1

來源

2016-06-09 01:35:31

感謝你的迴應，但它沒有幫助，我想，當我們定義一個根路由「/」時，它會使另一條路徑如「/ about」像其子節點一樣行爲。出現「route-link-active」類。 – asubanovsky

這是它是如何工作的：

<nav> 
    <a routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">Home</a> 
    <a routerLink="/about" routerLinkActive="active">About</a> 
</nav>

來源

2017-10-08 12:14:17 yogihosting

角2根的路線始終處於活動狀態

回答

相關問題