角形多个路由器插座

Question

我有一个Angle 6应用程序，我试图与它一起使用多个路由器插座，但无法使导航正常工作。

我的app.component看起来像这样

<router-outlet></router-outlet>

然后我有一个home组件，该组件的左侧有一个导航栏，右侧有一个主要部分。我正在使用它在主要部分中显示内容，而不会影响左侧的导航栏

<div toolbar></div>
<div mainSection>
   <router-outlet name="mainoutlet"></router-outlet>
</div>

我的路由模块如下所示

 path: '', component: HomeComponent, pathMatch: 'full', canActivate: [AuthGuard], children:
  [{ path: '', component: MainSectionComponent, outlet: 'mainoutlet' },
    { path: 'test1', component: Test1Component, pathMatch: 'full'},
    { path: 'test2', component: Test2Component, pathMatch: 'full' }

MainSectionComponent已在主要部分中正确加载，但是，每当我尝试导航到test1或test2时，它都会失败，并在控制台中出现Angular错误。

我正在尝试在服务中使用以下代码进行导航。

    this.router.navigate('test1');

我想知道它是否因为它从服务中调用而失败了，但我不知道。我尝试使用未命名的路由器插座，但这给了我相同的结果。我也尝试过将路线从主要部件的子级中移出，但这也不起作用。

作为参考，我的设置看起来与https://stackblitz.com/angular/aepvpqmoqaj?file=src%2Fapp%2Fapp.component.html完全相同。唯一的区别是我使用的是服务而不是html中的routerLinks。就是说，我已经注意到该代码也因与我收到的Angular错误而失败。