具有多个命名插座的延迟加载模块上的Angular2路由

Question

我在 Angular2 中遇到了路由问题。

1. 我的模块是延迟加载的（但到目前为止，基本的“loadChildren”方法没有问题）
2. 正在加载模块本身（在开发工具的网络选项卡中看到）

我的问题：

请参阅下面的路由代码。第一个版本工作正常。当我创建 routerLink to 时，找到了路由并且没有抛出错误。

但是，为什么我的第一个摘录有效，而第二个却没有？？？我不想创建一个伪路径“测试”只是为了让它工作。第二个例子是得到这个错误信息。

[...]无法匹配任何路由。 URL 段：'mypath'[...]

工作路线：

children: export const routes: Routes = [
    {
        path: '',
        component: ParentSplitViewComponent,
        children: [
            {
                path: '',
                redirectTo: 'test'
            },
            {
                path: 'test',
                component: SplitViewComponent,
                children: [
                    {
                        path: '',
                        redirectTo: 'list'
                    },
                    {
                        path: 'list',
                        component: MyListComponent,
                        outlet: 'left'
                    },
                    {
                        path: ':id',
                        component: MyDetailComponent,
                        outlet: 'right'
                    }
                ]
            }
        ]
    }
];

路由不工作：

children: export const routes: Routes = [
    {
        path: '',
        component: ParentSplitViewComponent,
        children: [
            {
                path: '',
                component: SplitViewComponent,
                children: [
                    {
                        path: '',
                        redirectTo: 'list'
                    },
                    {
                        path: 'list',
                        component: MyListComponent,
                        outlet: 'left'
                    },
                    {
                        path: ':id',
                        component: MyDetailComponent,
                        outlet: 'right'
                    }
                ]
            }
        ]
    }
];

请不要依赖文件的命名等。我不得不重命名路径等 - 从这个角度来看一切正常。它只是关于路由。

App.routing.ts

{
    path: 'mypath',
    loadChildren: 'app/modules/myModule/my.module#MyModule'
},

延迟加载模块的更大摘录以了解结构：

import [...]    


@Component({
    selector: 'parent-split-view-layout-container',
    template: `
    <h1>Parent</h1>

    <router-outlet></router-outlet>
  `
});
export class ParentSplitViewComponent {}



@Component({
    selector: 'split-view-layout-container',
    template: `
    <h1>Vertical Split View</h1>

    <div id="left">
        <router-outlet name="left"></router-outlet>
    </div>

    <div id="right">
        <router-outlet name="right"></router-outlet>
    </div>
  `
});
export class SplitViewComponent {}




/* Routing Definition */
export const routes: Routes = [
    {
        path: '',
        component: ParentSplitViewComponent,
        children: [
            {
                path: '',
                redirectTo: 'test'
            },
            {
                path: 'test',
                component: SplitViewComponent,
                children: [
                    {
                        path: '',
                        redirectTo: 'list'
                    },
                    {
                        path: 'list',
                        component: MyListComponent,
                        outlet: 'left'
                    },
                    {
                        path: ':id',
                        component: MyDetailComponent,
                        outlet: 'right'
                    }
                ]
            }
        ]
    }
];

export const MyRouting: ModuleWithProviders = RouterModule.forChild(routes);

Angular2 版本：

"@angular/common": "~2.4.5",
"@angular/compiler": "~2.4.5",
"@angular/core": "~2.4.5",
"@angular/forms": "~2.4.5",
"@angular/http": "~2.4.5",
"@angular/material": "^2.0.0-beta.1",
"@angular/platform-browser": "~2.4.5",
"@angular/platform-browser-dynamic": "~2.4.5",
"@angular/router": "~3.4.5",

Answer 1

这是一个已知的错误。
一个月前我举报了https://github.com/angular/angular/issues/13807
它已关闭，因为它与以下内容重复：https://github.com/angular/angular/issues/10981

我也需要这个，但由于问题自 2016 年 8 月 26 日以来已打开，并且“vsavkin 于 2016 年 11 月 16 日删除了他们的任务”，我认为我们不会很快看到修复.

与我可以使用辅助路线完成的相比，我最终得到了一些非常糟糕的结果，但工作必须跟上。我希望我能够为此做出贡献，但我不是......

编辑： (13/06/18)
看来fix 今天已合并！

Answer 2

感谢遇到同样问题的一些乐于助人的人，我在这里找到了解决方法。您的问题很可能是您尝试在空路由上使用路由器插座作为孩子。我能够通过将路由命名为静态值并从那里将插座设为子级来解决类似的问题。

正如其他人所说，您可以在此处跟踪问题 - https://github.com/angular/angular/issues/10981

尝试改变

{
  path: '',
  component: SplitViewComponent,
  children: [
    {
      path: '',
      redirectTo: 'list'
    },
    {
      path: 'list',
      component: MyListComponent,
      outlet: 'left'
    },
    {
      path: ':id',
      component: MyDetailComponent,
      outlet: 'right'
    }
  ]
}

到

{
  path: 'somePath',
  component: SplitViewComponent,
  children: [
    {
      path: '',
      redirectTo: 'list'
    },
    {
      path: 'list',
      component: MyListComponent,
      outlet: 'left'
    },
    {
      path: ':id',
      component: MyDetailComponent,
      outlet: 'right'
    }
  ]
}