在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
      }
  ]
}

因此，有两个router-outlets，分别是modalcontainer和modalview。后者位于ModalsComponent的模板内。

AppComponent

<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 时出错。

我尝试过的导航方式有：

• [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的方式有问题吗？还是这是一个 bug？

- DoubleA

---

今天我测试了它并且想谈一下我的结果。 - Allen Wahlberg

请复制此链接： https://dev59.com/-pvga4cB1Zd3GeqP1GPY#40932620 - Dmitriy Ivanko

似乎你应该尝试使用 http://localhost:4200/(modalcontainer:modals/(modalview:sign-in))。 - thorn0

Answer 1

我从未找到答案 - 这似乎是angular中的一个bug。对于任何遇到同样问题的人，我的解决方案是删除嵌套。

我删除了modalcontainer的出口。

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

我将先前注入到modalcontainer中的视图作为一个接受内容并将其用作每个modalview的基础组件的组件。

---

AppComponent

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

模态框组件

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

模态注册组件

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

路由器配置

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

- DoubleA