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.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 有成功的解决方法，请post 提供。

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

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

Angular 2 lazily loaded routes that contain aux router outlet

angular2-routing

angular

原文：app.routing.ts

新：app.routing.ts

settings.routing.ts

settings.routing.ts

更新

解决方案：

app.routing.ts（保持不变）

settings.routing.ts

注：

辅助路由路径

新路由路径

结论