導航到角度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的模板ModalsComponent 。

AppComponent

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

ModalsComponent

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

modalcontainer填充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的方式？ 還是這是一個錯誤？

Answer 1

我從來沒有找到解決這個問題的方法-好像是一個角度錯誤。 對於遇到相同問題的任何人，我的解決方案都是刪除嵌套。

我卸下了modalcontainer的出口。

我直接將modalview添加到我的主要組件中。

我將先前注入到modalcontainer中的視圖作為一個接受內容的組件，並將其用作我的每個modalview的基本組件。

---

AppComponent

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

ModalsComponent

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