Angular: 如何使用多个router-outlets?

Angular: How to use multiple router-outlets?

我有这样的组件

主页:

<div> 
 <a routerLink="alpha"> Alpha </a>
 <a routerLink="beta"> Beta </a>
</div>

<router-outlet></router-outlet>

<footer></footer>

测试版模板:

<div>
 <a routerLink="/actual">actual</a>
 <a routerLink="/archive">archive</a>
<div>
<router-outlet></router-outlet>

可能的情况是: 当您单击主页上的 BETA 按钮时,它会在主页中调出路由器插座测试版模板。 但是 beta 模板中的路由器插座是空的。当我点击 beta 模板中的 links 时,它会带来组件。

当点击主页上的 BETA link 时,测试页面中的 router-outlet 不会出现空的,而是点击实际的传入组件。

例如,如果你想在导航到beta时需要激活一些子路由:

    const appRoutes: Routes = [
      { path: 'alpha', component: SomeComponentA},
      { path: 'beta',        
        component: SomeComponentB,
        children: [
           {
               path: 'actual',        
               component: SomeComponentBActual,
           },
           {
               path: 'archive',        
               component: SomeComponentBArchive,
           },
           // add
            {
               path: '',        
               redirectTo: 'actual', pathMatch: 'full',
           },
       ]           

  },         
   ];

所以当您导航到 beta 时,它会重定向到它的子路由。 CODE EXAMPLE