Question

我正试图在组件中包括一个“特殊的”路由器出口。

这是app.component.html：

<div fxFlexFill fxLayout="column">
   <header fxFlex="40px">
       <router-outlet name="header"></router-outlet>
   </header>
  <router-outlet></router-outlet>
</div>

每个都用于一个不同的路由文件，第一个进入header.routing.ts，第二个进入app.routing.ts。

有可能吗？如何链接任何路由器及其文件？

Answer 1

是的，可以使用，角度提供的出口功能，下面是一个伪示例

<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
 <div class="container-fluid">
   <div class="row d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3">
     <div class="col-12">
       <router-outlet name="left"></router-outlet>
     </div>
   </div>
   <div class="row d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3">
     <div class="col-12 sm-12 md-12 xs-12 lg-12">
       <router-outlet name="right"></router-outlet>
     </div>
   </div>
 </div>
</main>

和路线文件中-

const appRoutes: Routes = [{
  path: '', redirectTo: 'processi', pathMatch: 'full',
  children: [
       { path: '', component: TeamDashboardComponent, outlet: 'left' },
       { path: '', component: ChatroomComponent, outlet: 'right' }
    ]
},
. . .
. . . .
. . . . .
}]

如果您对此有任何疑问，请告诉我。.

链接到不同路由文件的两个路由器出口

1 个答案: