angular - 以 Angular 4 导航到嵌套/多个辅助路线

Question

我正在尝试导航到嵌套的辅助路线，但我不断收到错误消息:

ERROR Error: Uncaught (in promise):
Error: Cannot match any routes. URL Segment: 'sign-in'

我试图导航到的 URL:

http://localhost:4200/(modalcontainer:modals//modalview:sign-in)

我的路由配置如下:

{
  path: 'modals',
  component: ModalsComponent,
  outlet: 'modalcontainer',
  children: [
      {
          path: 'register',
          outlet: 'modalview',
          component: ModalRegisterComponent
      },
      {
          path: 'sign-in',
          outlet: 'modalview',
          component: ModalSigninComponent
      }
  ]
}

所以有 2 个 router-outlets，分别是 modalcontainer 和 modalview。后者位于 ModalsComponent 的模板内。

应用组件

<router-outlet></router-outlet>
<router-outlet name="modalcontainer"></router-outlet>

模态组件

<div class="overlay" (click)="close($event)">
  <router-outlet name="modalview"></router-outlet>
</div>

modalcontainer 填充正常，但是当我尝试填充 modalview socket 时，它会出错。

我尝试过的导航方式有:

• [routerLink]="[{outlets: {'modalcontainer': ['modals'], 'modalview': ['register']}}]"
• [routerLink]="[{outlets: {'modalcontainer': ['modals'], 'modalview': ['modals', 'register']}}]"
• [routerLink]="['modals', {outlets: {'modalview': ['register']}}]"
• 直接在地址栏输入http://localhost:4200/(modals:modals//modal:sign-in)
• this.router.navigate([{outlets: {'modalcontainer': ['modals'], 'modalview': ['register']}}]);
• this.router.navigateByUrl('/(modals:modals//modal:sign-in)');

是我的配置问题还是我访问 URL 的方式问题？或者这是一个错误？

Answer 1

我从来没有找到这个问题的答案——这似乎是 angular 中的一个错误。对于遇到同样问题的任何人，我的解决方案是删除嵌套。

我删除了 modalcontainer 的导出。

我将 modalview 直接添加到我的主要组件中。

我将之前注入(inject)到 modalcontainer 中的 View 变成了一个接受内容的组件，并将其用作我的每个模态视图的基础组件。

---

应用组件

<router-outlet></router-outlet>
<router-outlet name="modalview"></router-outlet>

模态组件

<div class="overlay" (click)="close($event)">
  <ng-content></ng-content>
</div>

ModalRegisterComponent

<modal-container>
  <h3>Register</h3>
  ...
</modal-container>

路由器配置

{
    path: 'modals/register',
    outlet: 'modalview',
    component: ModalRegisterComponent
},
{
    path: 'modals/sign-in',
    outlet: 'modalview',
    component: ModalSigninComponent
}