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

我正在创建scotch.io的ng2版本。 我能够实现

主页

和

关于

页面的基本导航。在

主页

中，我可以为孩子们创建导航，即

列表

和

段落

。我被

关于

页面卡住了。我可以导航到“关于”页面，但无法在其相应的出口中呈现

关于的子
组件。这就是我正在做的：

关于.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>

关于路由.module.ts

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

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 {

}

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

我不知道我错过了什么。正在呈现about页面，但它没有呈现它的子组件。控制台中也没有错误。这是完整的。
嘿@hitesh最有可能的错误是关于组件的路由错误，您在中为两个组件以及父组件使用了相同的路径名称。请更改此名称，然后像这样尝试

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

可能在这种情况下，angular会尝试根据URL加载组件，而URL在任何情况下都是关于的，因此子组件在这种情况下可能不会呈现。
Hey@hitesh最有可能的错误是关于组件的路由，您在中为两个组件以及父组件使用了相同的路径名。请更改此名称，然后像这样尝试

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

可能是这种情况，angular会尝试根据URL加载组件，在每种情况下，URL都是关于
的，因此子组件在这种情况下可能不会呈现。
在玩了命名的
之后，我发现了这一点。我没有给出正确的路径。因为当用户进入
about
页面时，我的两个组件都应该在相应的出口中呈现。两者都没有相对的url/路径。它们是
about
的默认子级。所以我更新了我的
路径：'about'
到
路径：'
。它开始工作了。希望这将有助于某人

关于.routes.ts

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

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 {

}

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

@Pradeep感谢您突出显示
路径问题。
在玩了名为
的游戏后，我发现了这一点。我没有给出正确的路径。因为当用户进入
about
页面时，我的两个组件都应该在相应的出口中呈现。两者都没有相对的url/路径。它们是
about
的默认子级。所以我更新了我的
路径：'about'
到
路径：'
。它开始工作了。希望这将有助于某人

关于.routes.ts

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

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 {

}

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

@非常感谢您突出显示
路径问题。
谢谢您的回答。问题是
aboutOne
和
aboutTwo
都不是路由，而是您可以在scotch.io教程中看到的视图。它只有两个
ui视图
，路由模板属于这些视图。我想做一些类似的使用路由器插座。我的组件以相同的路径进入相应的插座请在某个plunker上重新创建您的问题？？我有回购代码。你可以调查一下。我已经使用angular cli创建了回购协议。因此，将其移动到plunkr将非常耗时。哦，对不起，兄弟，即使我没有太多时间让您的回购运行，但您提供的plunkr从angular1.x看起来很酷。我仔细研究了一下销售渠道，并试图找出答案。谢谢你的回答。问题是
aboutOne
和
aboutTwo
都不是路由，而是您可以在scotch.io教程中看到的视图。它只有两个
ui视图
，路由模板属于这些视图。我想做一些类似的使用路由器插座。我的组件以相同的路径进入相应的插座请在某个plunker上重新创建您的问题？？我有回购代码。你可以调查一下。我已经使用angular cli创建了回购协议。因此，将其移动到plunkr将非常耗时。哦，对不起，兄弟，即使我没有太多时间让您的回购运行，但您提供的plunkr从angular1.x看起来很酷。我研究了一下销售渠道，并试图找出答案。谢谢。我花了一整天的时间想明白，谢谢。我花了一整天的时间来弄明白。