Angular：如何使用多个路由器插座？答案

【问题标题】：Angular: How to use multiple router-outlets?Angular：如何使用多个路由器插座？
【发布时间】：2018-09-02 05:54:50
【问题描述】：

我有一个这样的组件

主页：

<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 模板中的 router-outlet 是空的。当我点击 beta 模板中的链接时，它会带来组件。

当主页上的BETA链接被点击时，beta页面中的router-outlet并没有空出来，而是点击了实际的传入组件。

【问题讨论】：

您的问题到底是什么？请帮助我们理解一下。
这对我的英语来说已经足够了。我要 = 当主页上的 BETA 链接被点击时，beta 页面中的 router-outlet 不会空出来，而是点击实际传入的组件。
嗨@VolkanÇiloğlu，您使用的Angulars routerlink 指令错误。指令和路由需要放在括号[] 中。例如<a [routerLink]="['/actual']">actual</a>
另外请您提供您的routes 代码吗？可能在一个名为 app-routing.module.ts 或类似文件的文件中。

标签： angular router router-outlet

【解决方案1】：

例如，如果您希望在导航到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

【讨论】：

是的，我正试图做这样的事情。我将通过对其进行一些改进来使其更有用。感谢您的帮助