首页 文章

以角度4导航到嵌套/多个辅助路径

提问于
浏览 次
2

我试图导航到嵌套的辅助路由，我不断收到错误：

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

我尝试导航到的网址：

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 的模板中 .

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 填充正常，但是一旦我尝试填充 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的方式吗？或者这是一个错误？

angular router angular-router angular-auxiliary-routes

1 回答

  • 0

    我从来没有找到答案 - 这似乎是一个有角度的错误 . 对于遇到相同问题的任何人，我的解决方案是删除嵌套 .

    我拆除了模态容器的出口 .

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

    我创建了以前注入modalcontainer的视图，该组件接受内容并将其用作每个模态视图的基本组件 .

    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
}
    回复于

相关问题