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下加载应用程序时，我首先使用登录组件/页面（默认情况下加载到未命名的router-outlet）来检查用户并通过。之后，它将转到仪表板组件/页面（使用AuthguardGuard）。然后是：http://localhost:4200/dashboard 从仪表板页面我希望能够导航到其他页面/组件，并且应该将它们加载到插座中：“content”

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>

此处的错误是您的“内容”路由器与仪表板将显示的“主”路由器位于同一级别。 “content”路由器应位于dash.component.html内，而app.component.html中的 NOT 。只需复制粘贴您的dashboard.component.html内的<router-outlet name="content"></router-outlet>，它就可以正常工作。

Angular 2路由儿童和路由器插座

1 个答案: