Question

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

about.component.html

about

about.routes.ts

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

关于-routing.module.ts

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

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

Answer 1

嘿@hitesh最有可能的错误是关于组件的路由，你已经为两个组件和父组件使用了相同的路径名，请改变它并像这样尝试

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

可能会出现这样的情况：在每种情况下，角度都会尝试根据URL找到about来加载组件，因此在这种情况下子组件可能无法呈现。

Answer 2

在使用名为<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问题。

Angular2：Child Componet中的多个路由器插座

2 个答案: