Angular 2延迟加载的包含辅助路由器出口的路由答案

【问题标题】：Angular 2 lazily loaded routes that contain aux router outletAngular 2延迟加载的包含辅助路由器出口的路由
【发布时间】：2017-07-29 22:41:45
【问题描述】：

我的路由有问题，需要一些帮助。最初，我将所有路由都放在一个 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.routing.ts

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

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

现在我已经重构，没有 SettingsComponent 被加载，所以会出现错误，指出没有 settings 出口。

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

settings.routing.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 有成功的解决方法，如果你能发布它们，我将不胜感激。

【问题讨论】：

标签： angular angular2-routing

【解决方案1】：

只是为了解决这个问题而进行的更新。在阅读了github上报告的问题后，Keith Gillette的解决方案在我摆弄了一下之后就可以工作了。

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

解决办法：

我构建路线的方式如下：

未声明任何组件的初始空路径。
然后，您将在此空路径上声明包含所有子路径的子路径。
子路径声明路径和包含辅助路由器插座的基本组件。在我的情况下，SettingsComponent 包含我的settings 路由器插座。
然后每个子路径将声明另一组子路径，其中包含一个空路径以及要在辅助路由器出口中加载的组件。

以下是我的有效路线示例。

app.routing.ts（保持不变）

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

settings.routing.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 问题上的一些 cmets，一些报告说您声明要在辅助路由器出口中加载的组件的子路由似乎仅适用于空路径。我没有测试这个。您可能需要继续使用辅助路由器嵌套空路由器路径来解决此问题。希望这会有所帮助。

【讨论】：