包含辅助路由器出口的 Angular 2 延迟加载路由 [英] Angular 2 lazily loaded routes that contain aux router outlet

问题描述

我的路由有问题，需要一些帮助.最初，我将所有路由都放在一个 app.routing.ts 文件中.我目前正在将我的路线重构到一个文件中，以配合延迟加载的相应功能模块.一个延迟加载的功能模块使用一个辅助辅助路由器插座.这是我的代码....

原文:app.routing.ts

const appRoutes: Routes = [{路径:'设置'，组件:设置组件，孩子们: [{小路: ''，redirectTo: '/settings/(settings:user)',路径匹配:'完整'},{路径:'用户'，组件:设置用户组件，出口:'设置'}]}]

新:app.routing.ts

const appRoutes: Routes = [...{路径:'设置'，loadChildren: '@app/settings/settings.module#SettingsModule'}...]

settings.routing.ts

export const SETTINGS_ROUTES = [{小路: ''，redirectTo: '/settings/(settings:user)',路径匹配:'完整'},{路径:'用户'，组件:设置用户组件，出口:'设置'}]

所以问题是最初我的 settings 路径会加载包含 settings 插座的 SettingsComponent.然后空子路径将重定向到 /settings/(settings:user) 并在 settings aux router outlet 中加载 SettingsUserComponent.>

现在我已经重构了，没有加载 SettingsComponent 所以出现错误，说没有 settings 插座.

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

settings.routing.ts

export const SETTINGS_ROUTES = [{小路: ''，组件:'设置组件'，孩子们: [{小路: ''，redirectTo: '/settings/(settings:user)',路径匹配:'完整'},{路径:'用户'，组件:设置用户组件，出口:'设置'}]}]

如何加载包含子路由的 settings 出口的 SettingsComponent.非常感谢任何建议.

谢谢

更新

<块引用>

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

自 2016 年 8 月以来就存在此问题.有些人已经能够使用 Angular4 创建变通方法.我试过了，但似乎不能与 Angular2 一起正常工作.

如果有人对 Angular2 有成功的解决方法，我会很感激您发布它们.

解决方案

只是一个更新，以提供解决此问题的方法.在通读了 github 上报告的问题后，Keith Gillette 的解决方案在我稍微摆弄了一下之后起作用了.

<块引用>

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

<小时>

解决方案:

我构建路线的方式如下:

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

下面是我的路线的一个例子.

app.routing.ts(保持不变)

const appRoutes: Routes = [{路径:'日程'，loadChildren: '@app/schedule/schedule.module#ScheduleModule'}];

settings.routing.ts

export const SETTINGS_ROUTES = [{小路: ''，孩子们: [{路径:'日程'，组件:设置组件，孩子们: [{小路: ''，组件:SettingsScheduleComponent，出口:'设置'}]},{路径:'用户'，组件:设置组件，孩子们: [{小路: ''，组件:设置用户组件，出口:'设置'}]}]}];

<小时>

注意:

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

辅助路由路径

<a [routerLink]="['/settings', { outlet: { settings: 'user'} }]">用户</a>

新路由路径

用户</a>

<小时>

结论

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

I'm having an issue with my routing that I'd need a little help with. Originally I had all my routing in a single app.routing.ts file. I'm currently refactoring my routes into a files to accompany their corresponding feature modules to be lazily loaded. One lazily loaded feature module utilizes a secondary aux router outlet. Here is my code....

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

So the issue is that originally my settings path would load the SettingsComponent that contains the settings outlet. The empty child path would then redirect to /settings/(settings:user) and load the SettingsUserComponent in the settings aux router outlet.

Now that I've refactored, there is no SettingsComponent being loaded so an error occurs saying that there is not a settings outlet.

From the documentation, it states that I'm not able to use component attribute with loadChildren. I can't use component with redirectTo in the SETTINGS_ROUTES either. I've tried wrapping my settings routes in another empty path like below but didn't seem to solve the problem.

settings.routing.ts

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

How do I go about loading my SettingsComponent that contains the settings outlet for the child routes. Any suggestions are greatly appreciated.

Thanks

Update

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

There is an issue for this since Aug 2016. Some have been able to create workarounds with Angular4. I've tried them but don't seem to work properly with Angular2.

If anyone has a successful workaround for Angular2, I'd appreciate if you'd post them.

解决方案

Just an update to provide a solution to this problem. After reading through the issue reported on github, Keith Gillette's solutions works after I fiddled around with it a bit.

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

---

Solution:

The way that I constructed my routes are as follows:

1. Initial empty path with no component declared.
2. You will then declare child routes on this empty path with all your sub paths.
3. The sub paths declare the path and the base component that contains your aux router outlet. In my case the SettingsComponent contains my settings router outlet.
4. Each sub path will then declare another set of children containing an empty path with the component to be loaded in the aux router outlet.

Below is an example of my routes that are working.

app.routing.ts (stays the same)

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

---

Note:

One thing to note is that the paths no longer follow the aux router path pattern.

Aux Route Path

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

New Routing Paths

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

---

Conclusion

This solutions works for my routing. I did not test it for multiple nested child routes though. Reading some of the comments on the above linked github issue, some are reporting that child routes where you declare the component to be loaded in the aux router outlet only seem to work with empty paths. I did not test this. You may need to continue nesting empty router paths with aux routers to workaround this. Hope this helps.

这篇关于包含辅助路由器出口的 Angular 2 延迟加载路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！