Angular 2 路由子节点和路由器出口

Question

我正在使用带有子节点的路由，这些子节点应该加载到单独的插座中。 所有组件都直接放在 /app 文件夹中。

app.router.ts：

export const router: Routes = [

    { path:'dashboard', canActivate:[AuthguardGuard], component: DashboardComponent },
    { path:'', component: LoginComponent },
    { 
        path: 'dashboard', component: DashboardComponent, 
        children: [
           { path:'features', component: FeaturesComponent, outlet: 
           { path:'signup', component: SignupComponent, outlet: 'content' },
           { path:'more', component: MoreComponent, outlet: 'content', 
           { path: '**', component: PageNotFoundComponent }
       ]
    }
];

dashboard.component.html：

<a [routerLink]="['./']">Overview</a>
<a [routerLink]="['features']">Features</a>
<a [routerLink]="['details']">How To</a>
<a [routerLink]="['more']">SignUp</a>
<a [routerLink]="['signup']">SignUp</a>

当在http.//localhsot:4200 下加载应用程序时，我首先从一个登录组件/页面（默认加载在未命名的路由器插座中）开始检查用户并通过。之后它进入仪表板组件/页面（使用 AuthguardGuard）。网址为：http://localhost:4200/dashboard 从仪表板页面我希望能够导航到其他页面/组件，它们应该加载到插座中：“内容”

app.component.ts：

<main class="mdl-layout__content">
    <div class="mdl-layout__tab-panel is-active" id="overview">
        <router-outlet></router-outlet>
        <router-outlet name="content"></router-outlet>
    </div>
</main>

我一直在尝试在平台上找到的一些建议，但都没有帮助。例如。： <a [routerLink]="['signup', {outlets: {content: 'signup'}}]">SignUp</a> <a [routerLink]="['../signup']">SignUp</a>

但它不起作用......不同的错误，如： Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'signup'

任何想法我做错了什么或者我应该改变或添加什么？

Answer 1

我认为解决这个问题非常困难。尝试像这样在您的路由器链接中定义一个空路径

[routerLink]="['', {outlets: {content: 'signup'}}]">SignUp</a>

您在 app.component.html 中定义了您的命名出口，这就是路径为空的原因

更新 1

命名路由器没有与您的子路由一起显示的原因是因为您的命名路由器与您的仪表板在同一个模板中，就像这样

 <router-outlet></router-outlet>
 <router-outlet name="content"></router-outlet>

这里的错误是您的“内容”路由器与显示仪表板的“主”路由器处于同一级别。 “内容”路由器应该在dashboard.component.html 中，而NOT 在你的app.component.html 中。只需将<router-outlet name="content"></router-outlet> 复制粘贴到您的dashboard.component.html 中即可。