在 Angular 2 中使用路由器插座

Question

下面的伪代码描述了我的组件树结构。

 <app-root>

<router-outlet name="main">

     <Home-component>

        <a routerLink="about">About</a> //
        <router-outlet name="home"> </<router-outlet>

     </Home-component>

</router-outlet>

</app-root>

当用户点击“关于”链接时，“关于”组件显示在“主”路由出口中，但我的意图是将其显示在“家”路由器出口中，需要修改什么才能实现。

“app-root”组件和“Home-component”是根模块的一部分，“AboutComponent”是功能模块的一部分。

根模块路由如下..

 RouterModule.forRoot([
    {path:'' , component:LoginComponent },
    {path:'home' , component:HomeComponent}
  ]),

和功能模块路由如下…

 RouterModule.forChild([
    {path:'about' , component:AboutComponent }
])

原文由 refactor 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

按照这种模式为您的路线。

  export const routes: Route[] = [{
        path: '',
        redirectTo: "login",
        pathMatch: "full"
    },
    {
        path: 'login',
        component: LoginComponent
    },
    {
        path: 'csvtemplate',
        component: TemplateComponent,
        canActivate: ['canActivateForLoggedIn'],
        children: [{
            path: '',
            redirectTo: 'dashboard'
        },
        {
            path:'dashboard',
            component: DashboardComponent
        },
        {
            path: 'csvtimeline',
            component: CsvTimelineComponent
        }, {
            path: 'addcategory',
            component: CsvAddCategoryComponent
        }
        ]
    }];

原文由 Amit kumar 发布，翻译遵循 CC BY-SA 3.0 许可协议