无法让 Angular 中的嵌套路由显示在视图中

Question

我在 Angular 中的 child/nested 路由遇到了各种麻烦 4. 在 app.module.ts 中的导入语句中，我有：

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

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

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

这工作正常并将我带到父 TemplateLandingComponent。然后我在 TemplateLandingComponent 中还有另一个 link：

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

单击此 link 路由到正确的 url 但不显示我的 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 中的嵌套路由显示在视图中

Cannot get nested routes in Angular to show up in the view

html

single-page-application

typescript

angular

angular-router