Angular 2延迟加载路线,包含辅助路由器插座

时间:2017-07-29 22:41:45

标签: angular angular2-routing

我的路由存在问题,我需要一些帮助。最初我将所有路由都放在一个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中使用redirectToSETTINGS_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有成功的解决方法,我会很感激你发布它们。

1 个答案:

答案 0 :(得分:0)

只是为此问题提供解决方案的更新。在阅读了github上报道的问题之后,Keith Gillette的解决方案在我摆弄它之后起作用了。

  

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

解决方案:

我构建路线的方式如下:

  1. 未声明组件的初始空路径。
  2. 然后,您将使用所有子路径在此空路径上声明子路由。
  3. 子路径声明包含辅助路由器插座的路径和基本组件。在我的情况下,SettingsComponent包含我的settings路由器插座。
  4. 然后,每个子路径将声明另一组包含空路径的子项,其中组件将被加载到辅助路由器插座中。
  5. 以下是我的路线工作示例。

    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路由器嵌套空路由器路径以解决此问题。希望这会有所帮助。