Question

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

app.component.html

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

管理员-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/edit网址段不匹配。

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：

导航到您的aux路线

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

或以编程方式：

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

这是一个working Plunkr我想弄清楚并证明成功加载儿童辅助路线。

Angular 2路由器无法解析子辅助路由

1 个答案: