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

jul*_*uli 5 angular2-routing angular

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

  1. 我的模块是懒惰的(但到目前为止基本的"loadChildren"方法没有问题)
  2. 正在加载模块本身(在dev-tools的网络选项卡中可以看到)

我的问题:

请参阅下面的路由代码.第一个版本正常工作.找到路由,并且在创建routerLink时不会抛出任何错误.

但是,为什么我的第一个摘录工作,第二个不?我不想创建一个伪路径"测试"只是为了让这个工作.第二个例子是获取此错误消息.

[...]无法匹配任何路线.网址细分:'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'
                    }
                ]
            }
        ]
    }
];
Run Code Online (Sandbox Code Playgroud)

不工作路由:

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'
                    }
                ]
            }
        ]
    }
];
Run Code Online (Sandbox Code Playgroud)

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

App.routing.ts

{
    path: 'mypath',
    loadChildren: 'app/modules/myModule/my.module#MyModule'
},
Run Code Online (Sandbox Code Playgroud)

更大的延迟加载模块摘要,以了解结构:

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);
Run Code Online (Sandbox Code Playgroud)

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",
Run Code Online (Sandbox Code Playgroud)

max*_*992 4

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

我也需要这个,但由于该问题自 2016 年 8 月 26 日以来一直存在,并且“ vsavkin 于 2016 年 11 月 16 日删除了他们的任务”,我认为我们不会很快看到修复。

与我用辅助路线所能做的相比,我最终得到了一些非常糟糕的结果,但工作必须跟上。我希望我能够为此做出贡献,但我没有......

编辑: (13/06/18)
看起来今天已经合并了修复!

  • 也很惊讶...因此我不得不重新考虑我的应用程序的某些部分,并且在 v4.0.0 中仍未修复...很遗憾。我什至没有生气,因为它是开源的,我无法自己解决这个问题,但这是一个杀手级功能,延迟加载也很棒。必须在两者之间做出选择是悲伤的 (2认同)