使用嵌套路由器的角度4

Question

即時通訊使用多個路由器oulets來加載我的組件。 外部路由器插座用於加載大多數基本組件，例如登錄，home，404。 我使用嵌套的router-outlet加載主頁的子組件。該router-outlet嵌套在home.component中。

home.component.html

<app-header></app-header> 
<router-outlet name="homeRoute"></router-outlet> 
<app-footer></app-footer> 

app.module.ts

const appRoutes: Routes = [ 
    {path: '', component: HomeComponent, children: [ 
    {path: '', component: DashboardComponent, outlet: 'homeRouter'}, 
    {path: 'user', component: UserComponent, outlet: 'homeRouter'}, 
    {path: 'user/:id', component: UserdetailComponent, outlet: 'homeRouter'} 
    ]}, 
    {path: 'login', component: LoginformComponent}, 
    {path: '**', component: NotfoundComponent} 
]; 

HomeComponent和LoginformComponent需要從外路由器出口加載。 家庭組件包含名爲'homeRouter'的內部路由器插座，我想用它來加載主頁的子組件。 但內部路由器導航不會工作。我試圖使用router.navigate（）方法和URL來訪問每個組件。但他們都沒有按預期工作。

有人可以告訴我這段代碼有什麼問題。我檢查並嘗試了幾個關於同一問題的問題，但沒有一個能正常工作。

下面是我嘗試了不同的組件

1. http://localhost:4200 dashboardComponet（這一個工程）
2. http://localhost:4200/user userComponent（不工作。路線notFoundComponent）
3. http://localhost:4200/user/U001 userDetailComponent（doenst work.still航線的URL到notFoundComponent）

Answer 1

你不需要命名router-outlet爲nesetd路由，你可以重新從路由器移動outlet: 'homeRouter'，並從router-outlet移動name="homeRoute"，它應該可以工作。

話雖如此，如果您有多個路由器插座的要求，以便您可以加載輔助路由以及主要路由，router-oulet的名稱應該與outlet屬性相同。在您正在使用的路線中有出口：「homeRouter」和name =「homeRoute」，它們應該是相同的。

這裏是一個多層次的嵌套線路上，例如，

Plunker

import { NgModule, Component }  from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { Routes, RouterModule, ActivatedRoute } from '@angular/router'; 

@Component({ 
    selector: 'my-app', 
    template: `<h1>Hello</h1> 
    <a routerLink="/" >Home</a> 
    <a routerLink="/admin" >Admin</a> 
    <a routerLink="/nonexistingroute" >Non existing Route</a> 
    <hr /> 
    <router-outlet></router-outlet> 
    ` 
}) 
export class AppComponent { 
} 

@Component({ 
    template: `<h1>Home</h1> 
    <a routerLink="/" >Dashboard</a> 
    <a routerLink="/users" >Users</a> 
    <hr /> 
    <router-outlet></router-outlet> 
    ` 
}) 
class HomeComponent {} 

@Component({ 
    template: `<h1>Admin</h1> 
    ` 
}) 
class AdminComponent {} 

@Component({ 
    template: `<h1>Dashboard</h1> 
    ` 
}) 
class DashboardComponent {} 


@Component({ 
    template: `<h1>Users</h1> 
    <a routerLink="user/1" >User 1</a> 
    <a routerLink="user/2" >User 2</a> 
    <hr /> 
    <router-outlet></router-outlet> 
    ` 
}) 
class Users {} 


@Component({ 
    template: `<h1>User {{id}}</h1> 
    ` 
}) 
class UserdetailComponent { 
    id=''; 
    constructor(private route: ActivatedRoute) { 
    this.route.params.subscribe(params => { 
    this.id = params['id']; 
    }); 
    } 
} 

@Component({ 
    template: `<h1>Not found</h1> 
    ` 
}) 
class NotfoundComponent {} 


const appRoutes: Routes = [ 
    { path: '', 
    component: HomeComponent, 
    children: [ 
     {path: '', component: DashboardComponent}, 
     {path: 'users', component: Users, 
     children: [ 
      {path: 'user/:id', component: UserdetailComponent} 
     ] 
     } 
    ] 
    }, 
    { 
    path: 'admin', 
    component : AdminComponent 
    }, 
    {path: '**', component: NotfoundComponent} 
]; 

@NgModule({ 
    imports:  [ BrowserModule,RouterModule.forRoot(appRoutes) ], 
    declarations: [ AppComponent, HomeComponent,AdminComponent,NotfoundComponent, DashboardComponent, Users, UserdetailComponent ], 
    bootstrap: [ AppComponent ] 
}) 

export class AppModule { } 

希望這有助於！