Angular 2 延迟加载的路由，其中包含辅助路由器出口

Question

我的路由有问题，我需要一点帮助。 最初，我将所有路由都放在一个app.routing.ts文件中。 我目前正在将我的路由重构为一个文件，以伴随它们相应的功能模块延迟加载。 一个延迟加载的功能模块利用辅助辅助路由器插座。 这是我的代码....

原文 ： app.routing.ts

const appRoutes: Routes = [
{
path: 'settings',
component: SettingsComponent,
children: [
{
path: '',
redirectTo: '/settings/(settings:user)',
pathMatch: 'full'
},
{
path: 'user',
component: SettingsUserComponent,
outlet: 'settings'
}
]
}
]

新增：app.routing.ts

const appRoutes: Routes = [
...
{
path: 'settings',
loadChildren: '@app/settings/settings.module#SettingsModule'
}
...
]

settings.routeting.ts

export const SETTINGS_ROUTES = [
{
path: '',
redirectTo: '/settings/(settings:user)',
pathMatch: 'full'
},
{
path: 'user',
component: SettingsUserComponent,
outlet: 'settings'
}
]

所以问题是最初我的settings路径会加载包含settings出口的SettingsComponent。 然后，空子路径将重定向到/settings/(settings:user)，并将SettingsUserComponent加载到settings辅助路由器插座中。

现在我已经重构了，没有加载SettingsComponent，因此发生错误，指出没有settings出口。

从文档中，它指出我无法将component属性与loadChildren一起使用。 我也不能在SETTINGS_ROUTES中将component与redirectTo一起使用。 我尝试将我的设置路由包装在另一个空路径中，如下所示，但似乎没有解决问题。

settings.routeting.ts

export const SETTINGS_ROUTES = [
{
path: '',
component: 'SettingsComponent',
children: [
{
path: '',
redirectTo: '/settings/(settings:user)',
pathMatch: 'full'
},
{
path: 'user',
component: SettingsUserComponent,
outlet: 'settings'
}
]
}
]

如何加载包含子路由settings出口的SettingsComponent。 任何建议将不胜感激。

谢谢

更新

https://github.com/angular/angular/issues/10981#issuecomment-301787482

自 2016 年 8 月以来，这一直存在问题。 有些人已经能够使用Angular4创建解决方法。 我已经尝试过它们，但似乎无法与 Angular2 正常工作。

如果有人对 Angular2 有成功的解决方法，如果您能发布它们，我将不胜感激。

Answer 1

只是一个更新，为这个问题提供解决方案。 在阅读了github上报告的问题后，Keith Gillette的解决方案在我摆弄了一下之后就起作用了。

https://github.com/angular/angular/issues/10981#issuecomment-301787482

---

溶液：

我构建路线的方式如下：

1. 未声明组件的初始空路径。
2. 然后，您将在此空路径上声明子路由以及所有子路径。
3. 子路径声明路径和包含辅助路由器插座的基本组件。 就我而言，SettingsComponent包含我的settings路由器插座。
然后，每个子路径
4. 将声明另一组子路径，其中包含一个空路径，其中包含要在 aux 路由器插座中加载的组件。

下面是我的路线示例。

app.routing.ts (保持不变(

const appRoutes: Routes = [
{
path: 'schedule',
loadChildren: '@app/schedule/schedule.module#ScheduleModule'
}
];

settings.routeting.ts

export const SETTINGS_ROUTES = [
{
path: '',
children: [
{
path: 'schedule',
component: SettingsComponent,
children: [
{
path: '',
component: SettingsScheduleComponent,
outlet: 'settings'
}
]
},
{
path: 'user',
component: SettingsComponent,
children: [
{
path: '',
component: SettingsUserComponent,
outlet: 'settings'
}
]
}
]
}
];

---

注意：

需要注意的一点是，路径不再遵循辅助路由器路径模式。

辅助路由路径

<a [routerLink]="['/settings', { outlets: { settings: 'user'} }]">
User
</a>

新路由路径

<a [routerLink]="['/settings/user']">
User
</a>

---

结论

此解决方案适用于我的路由。 不过，我没有针对多个嵌套子路由对其进行测试。 阅读有关上述链接的github问题的一些评论，有些人报告说，您声明要在aux路由器插座中加载组件的子路由似乎仅适用于空路径。 我没有测试这个。 您可能需要继续使用 aux 路由器嵌套空路由器路径才能解决此问题。 希望这有帮助。