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

Question

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

app.component.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'
      },{...}
    ]
  }
];
...

accounts-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/edit url 段。

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

好像有一个known bug在阻止父路径为空时加载子辅助路由的路由器中，这就是您在 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)')

这是一个working Plunkr我弄清楚了这一点并演示了成功加载子辅助路由。