Question

我在Angular 4中的子/嵌套路由遇到各种麻烦。在app.module.ts的imports语句中，我有：

    RouterModule.forRoot([
        {
            path: 'templates',
            component: TemplateLandingComponent,
            children: [
                {path: 'main-templates', component: MainTemplateComponent}
            ]
        },
    ])

在我的主导航中，我有以下内容：

<li><a [routerLink]="['/templates']" [routerLinkActive]="'active'">Templates</a></li>

这很好，并将我带到父TemplateLandingComponent。然后我在TemplateLandingComponent中有另一个链接：

<li><a [routerLink]="['/templates/main-templates']" [routerLinkActive]="'active'">Active Templates</a></li>

点击此链接会路由到正确的网址，但不会显示我的MainTemplateComponent。我做错了什么？

即使我手动导航到/ templates / main-templates，我仍然只能看到TemplateLandingComponent

Answer 1

尝试

<li><a routerLink="/main-templates" [routerLinkActive]="'active'">Active Templates</a></li>

将路线更改为此

RouterModule.forRoot([
    {
        path: 'templates',
        children: [
           {path: '', component: TemplateLandingComponent}
            {path: 'main-templates', component: MainTemplateComponent}
        ]
    },
])

或在TemplateLandingComponent中插入<router-outlet>。如果它的2个独立组件写入我写的routerModule，这取决于你想要的。它的父子组件在父组件中使用router-outlet。

routerLink将相对于您当前的路径而不是绝对路径进行导航。

无法在Angular中获取嵌套路由以显示在视图中

1 个答案: