在Angular 4中使用嵌套的路由出口

Question

在Angular 4中使用嵌套的路由出口

angularangular2-routingnested-routesrouter-outlet

9

我使用多个router-outlets来加载我的组件。外部的router-outlet用于加载大多数基本组件，如登录、主页和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需要从外部router-outlet加载。 Home组件包含名称为“homeRouter”的内部router-outlet，我想使用它来加载主页的子组件。但是内部路由器的导航不起作用。我尝试使用router.navigate()方法和URL访问每个组件。但是两者都没有按预期工作。

有人能告诉我这段代码有什么问题吗？我检查并尝试了一些关于相同问题的先前问题，但都没有正常工作。

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

1. http://localhost:4200 dashboardComponet（这个可以工作） 2. http://localhost:4200/user userComponent（不起作用。路由到notFoundComponent） 3. http://localhost:4200/user/U001 userDetailComponent（不起作用。仍然路由到notFoundComponent）

- LSampath

有一个拼写错误 name="homeRoute" 应该是 outlet: 'homeRouter'。 - DrMabuse

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Madhu Ranjan · Accepted Answer

对于嵌套路由，您不需要为其命名router-outlet，您可以从路由中删除outlet: 'homeRouter'和从router-outlet中删除name="homeRoute"，这样就可以生效了。

话虽如此，如果您需要多个router-outlet，以便可以随主要路由一起加载辅助路由，则router-oulet的名称应与outlet属性相同。在使用的路由中，您有outlet："homeRouter"和name="homeRoute"，它们应该是相同的。

以下是带有多级嵌套路由的完整示例：

Plunker

import { Component, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ActivatedRoute, RouterModule, Routes } 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>
  `
})
export class HomeComponent { }

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

@Component({
    template: `<h1>Dashboard</h1>
  `
})
export 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>
  `
})
export class Users { }

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

@Component({
    template: `<h1>Not found</h1>
  `
})
export 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 { }