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访问每个组件。但是他们都没有按预期工作。

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

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

http://localhost:4200 dashboardComponet（此工作正常）
http://localhost:4200/user userComponent（不起作用。路由到notFoundComponent）
http://localhost:4200/user/U001 userDetailComponent（doenst work.still route to notFoundComponent）

Answer 1

您不需要为nesetd路由命名路由器插座，您可以从路由中删除outlet: 'homeRouter'并从路由器插座中删除name="homeRoute"它应该可以正常工作。

话虽如此，如果您需要多个路由器插座以便可以加载辅助路由以及主路由，则router-oulet的名称应与outlet属性相同。在您使用的路线中，您有出口：＆＃34; homeRouter ＆＃34;和name =＆＃34; homeRoute ＆＃34;，它们应该相同。

这是一个包含多级嵌套路由的完整示例

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 { }

希望这会有所帮助!!

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

1 个答案: