使用角度为4的嵌套路由器插座

Question

我使用多个router-oulets来加载我的组件.外部路由器插座用于加载大多数基本组件,如login,home,404.我使用嵌套路由器插座来加载主页的子组件.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需要从外部路由器插座加载.Home组件包含名为'homeRouter'的内部路由器插座,我想用它来加载主页的子组件.但内部路由器的导航不起作用.我尝试使用router.navigate()方法并使用URL访问每个组件.但他们两个都没有按预期工作.

有人能告诉我这段代码有什么问题.我检查并尝试过几个关于同一问题的问题,但没有一个工作正常.

以下是我为不同组件尝试的URL

1. http://localhost:4200 dashboardComponet(这个有效)
2. http://localhost:4200/user userComponent(不起作用.路由到notFoundComponent)
3. http://localhost:4200/user/U001 userDetailComponent(doenst work.still route to notFoundComponent)

Answer 1

你不需要为nesetd路由命名路由器插座,你可以outlet: 'homeRouter'从路由和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 { }

希望这可以帮助!!