使用嵌套路由器的角度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 { } 

希望这有助于！