Angular 2 路由器不解析子辅助路由

Question

我正在尝试为模态窗口使用辅助路由。无论我尝试什么，我都无法解决。我只是收到路由错误。这是我的方法...

应用程序组件.html

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

admin-routing.module.ts

...
const ROUTES: Routes = [
  {
    path: 'admin',
    component: AdminComponent,
    children: [
      {
        path: 'accounts',
        loadChildren: './accounts/accounts.module#AccountsModule'
      },{...}
    ]
  }
];
...

账户-routing.module.ts

...
const ROUTES: Routes = [
  {
    path: '',
    children: [
      {
        path: '',
        component: AccountsIndexComponent
      },{
        path: 'new',
        component: AccountsNewComponent
      },{
        path: ':id',
        component: AccountsShowComponent
      },{
        path: ':id/edit',
        component: AccountsEditComponent,
        outlet: 'modal'
      }
    ]
  }
];
...

modal.service.ts

  ...
  constructor(
    private router:Router,
    private route:ActivatedRoute
  ) { }
  open(route:Array<any>) {
    this.router.navigate(
      [{outlets: {drawer: route}}], {relativeTo: this.route}
    )
  }
  ...

当我调用ModalService.open([account.id, 'edit'])它时，它会尝试导航到/admin/accounts(modal:1/edit)我认为它应该执行的操作。但我只是收到一个错误，它无法匹配1/editurl 段。

NavigationError(id: 2, url: '/admin/accounts(modal:1/edit)', error: Error: Cannot match any routes. URL Segment: '1/edit')

我尝试了以下方法，但它们也不起作用......

ModalService.open(['accounts', account.id, 'edit'])
ModalService.open(['admin','accounts', account.id, 'edit'])

Answer 1

路由器中似乎存在一个已知错误，该错误会在父路径为空时阻止加载子辅助路由，这就是您正在执行的操作accounts-routing.module.ts：

const ROUTES: Routes = [
  {
    path: '',                 // <--- cannot have an empty parent path...
    children: [
      {
         path: ':id/edit',
         component: AccountsEditComponent,
         outlet: 'modal'      // <--- ...with child aux outlet
      }
    ]
  }
]

为了解决这个问题，我们必须为路径提供一些东西。例如，如果您将路径命名为'accounts'：

const ROUTES: Routes = [
  {
    path: 'accounts', 
    ...

然后您可以从 routerLink 导航到您的辅助路由：

<a [routerLink]="['accounts', {outlets: {'modal': ['1/edit']}}]">

或以编程方式：

this.router.navigateByUrl('accounts/(modal:1/edit)')

这是我用来解决这个问题并演示成功加载子辅助路由的工作 Plunkr。