在Angular 2中使用router-outlet

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>

当用户单击" About“链接时，About组件显示在"main”路由出口中，但我的目的是将其显示在"home“路由器出口中，需要进行修改才能实现这一点。

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

根模块路由如下..

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

功能模块路由如下所示。

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

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
        }
        ]
    }];

Answer 2

1：不要在< -outlet>& < /router-outlet>之间嵌套路由器内容 "router-outlet“在功能上是一种i-frame。将内容放在那里是没有意义的，而且还没有看到这样做的教程。

2:如果有：< router-outlet name="MAIN_OUTLET_ID“>

然后，您需要在app.module.ts中使用类似以下内容

const appRoutes: Routes=[
 {path: 'main', outlet:MAIN_OUTLET_ID, component:MainComponent},
 /// ... more routes here ... ///
]

@NgModule({
...
imports: [
    RouterModule.forChild([ appRoutes ]),
    /// ... other imports here ... ///
],
...
})

备注：

1:我在我的示例中使用"MAIN_OUTLET_ID“，因为它消除了路径与路由器出口的id的歧义。

Answer 3

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

你可以试试这个way.your 'about‘应该包含在主页中。