Angular 2：子组件中的多个路由器出口

Question

我正在创建 scotch.io 的 angular-ui-router tutorial 的 ng2 版本。 我能够实现home 和about 页面的基本导航。在home 中，我可以为儿童创建导航，即list 和paragraph。我被about 页面卡住了。我可以导航到关于页面，但我无法在其相应的网点中呈现about 的孩子component。这就是我正在做的事情：

about.component.html

<div class="jumbotron text-center">
    <h1>The About Page</h1>
    <p>This page demonstrates <span class="text-danger">multiple</span> and <span class="text-danger">named</span> views.</p>
</div>
<div class="row">
    <div class="col-sm-6">
        <router-outlet name="aboutOne"></router-outlet>
        <router-outlet name="aboutTwo"></router-outlet>
    </div>
</div>

about.routes.ts

export const aboutRoutes: Routes = [
    {
        path: 'about',
        component: AboutComponent,
        children: [
            {
                path: 'about',
                outlet: 'aboutOne',
                component: AboutOneComponent
            },
            {
                path: 'about',
                outlet: 'aboutTwo',
                component: AboutTwoComponent
            }
        ]
    }
];

about-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';

import { aboutRoutes } from './about.routes';
@NgModule({
    imports: [RouterModule.forChild(aboutRoutes)],
    exports: [RouterModule]
})
export class AboutRoutingModule {

}

我不知道我错过了什么。关于页面正在呈现，但它没有呈现它的子组件，控制台中也没有错误。这是完整的github repo。

Answer 1

在玩了名为<router-outlet> 之后，我想通了。我没有给出正确的路径。因为当用户登陆about 页面时，我的两个组件都应该在其相应的插座中呈现。两者都没有相对的网址/路径。它们是about 的默认子代。所以我将我的path:'about' 更新为path:''。它开始工作了。希望这对某人有所帮助。

about.routes.ts

export const aboutRoutes: Routes = [
    {
        path: 'about',
        component: AboutComponent,
        children: [
            {
                path: '',
                outlet: 'aboutOne',
                component: AboutOneComponent,
                pathMatch: 'full'
            },
            {
                path: '',
                outlet: 'aboutTwo',
                component: AboutTwoComponent,
                pathMatch: 'full'
            }
        ]
    }
];

@Pradeep 感谢您强调path 问题。

Answer 2

嘿@hitesh 很可能错误在于关于组件的路由，您对两个组件以及父组件都使用了相同的路径名称，请更改它并像这样尝试

export const aboutRoutes: Routes = [
    {
        path: 'about',
        component: AboutComponent,
        children: [
            {
                path: 'aboutOne',
                outlet: 'aboutOne',
                component: AboutOneComponent
            },
            {
                path: 'aboutTwo',
                outlet: 'aboutTwo',
                component: AboutTwoComponent
            }
        ]
    }
];

可能是这样的情况，Angular 会尝试根据 URL 加载组件，在每种情况下都找到 about，因此在这种情况下子组件可能不会呈现。