在 Angular 2 中使用路由器插座

Posted 2023-02-22

【中文标题】在 Angular 2 中使用路由器插座

【英文标题】：Using router-outlet in Angular 2

【发布时间】：2017-04-04 10:32:42

【问题描述】：

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

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

当用户点击“关于”链接时，关于组件会显示在 “main” route-outlet ，但我的意图是在“home” router-outlet 中显示它， 需要修改什么来实现这一点。

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

根模块路由如下..

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

功能模块路由如下...

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

【问题讨论】：

您需要将about 路由配置为home 路由的子路由。

先配置路由，再试试<a [routerLink]="['/about', outlets: 'home':['about'] ]"></a>

看到这个答案：http://***.com/a/40477582/7045253

【参考方案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
        
        ]
    ];

【参考方案2】：

1：不要在 和 之间嵌套内容 “路由器插座”在功能上是一种 i-frame。将内容放在那里是没有意义的，并且已经看到零个这样做的教程。

2：如果您有：

那么你在 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 的歧义。

【参考方案3】：

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

您可以尝试这种方式。您的“关于”应该包含在 home 中。