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'
          }
        ]
    }
]

new：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路径会加载包含SettingsComponent插座的settings。然后，空子路径将重定向到/settings/(settings:user)并在SettingsUserComponent辅助路由器插座中加载settings。

现在我已经重构了，没有加载SettingsComponent因此发生错误，表示没有settings插座。

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

settings.routing.ts

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

如何加载包含子路径SettingsComponent插座的settings。非常感谢任何建议。

由于

更新

  

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. 然后，每个子路径将声明另一组包含空路径的子项，其中组件将被加载到辅助路由器插座中。

以下是我的路线工作示例。

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路由器插座中加载的组件的子路由似乎只能使用空路径。我没试过这个。您可能需要继续使用aux路由器嵌套空路由器路径以解决此问题。希望这会有所帮助。