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

问题描述

我的路由出现问题，需要一点帮助.最初，我所有的路由都放在一个app.routing.ts文件中.我目前正在将路线重构为文件，以使其相应的要素模块延迟加载.一个延迟加载的功能模块使用了辅助辅助路由器出口.这是我的代码....

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....

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)并将SettingsUserComponent加载到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.

现在我已经重构了，没有SettingsComponent正在加载，因此发生错误，提示没有settings出口.

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

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

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.

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

如何加载包含子路线的settings出口的SettingsComponent.任何建议都将不胜感激.

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

谢谢

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

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

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.

如果有人对Angular2有成功的解决方法，那么如果您将其发布，我们将不胜感激.

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

推荐答案

只需进行更新即可提供此问题的解决方案.在阅读了github上报告的问题之后，在我稍作修改后，Keith Gillette的解决方案就起作用了.

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. 没有声明任何组件的初始空路径.
2. 然后，您将在带有所有子路径的空路径上声明子路径.
3. 子路径声明包含辅助路由器出口的路径和基础组件.在我的情况下，SettingsComponent包含我的settings路由器插座.
4. 然后，每个子路径将声明另一组包含空路径的子代，其中包含要在辅助路由器出口中加载的组件的空路径.

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.

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.

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

新的路由路径

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

---

结论

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

---

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.

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