Html 无法获取角度视图中显示的嵌套管线

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

模板

这可以很好地工作，并将我带到父模板组件。然后，我在模板组件中有另一个链接：

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

活动模板

单击此链接将路由到正确的url，但不显示my MainTemplateComponent。我做错了什么

即使手动导航到/templates/main templates，我仍然只能看到templatelanding组件

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

或者在模板组件中插入

。 如果它的两个独立组件编写我编写的routerModule，这取决于您想要什么。它的父子组件使用父组件中的路由器出口

---

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

您是否在TemplateLandingComponent中添加了路由器出口我已将路由器出口添加到我的app.component.ts这仍然只是显示我的TemplateLandingComponent。核心问题是，即使（手动）导航到/templates/main templates，也无法正确路由到my MainTemplateComponent。请插入templateLandingComponent，然后手动导航到所需的位置？

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