带出口的角lazyload子路线 [英] Angular lazyload child routes with outlet

问题描述

我试图在 stackblitz

我要完成的任务

我正在尝试使用动态参数路由，并使用该参数的子路由.我希望这个模块被延迟加载. 我已经使用路由定义中的:id定义为动态参数制定了可行的解决方案.

I am trying to have a route with a dynamic parameter, and have sub routes of that parameter. I want this module to be lazyloaded. I have made a working solution for the dynamic parameter using the :id definition in the route definition.

我希望子路由在不同的路由器插座中输出.

I want the child routes to output in a different router-outlet.

具体来说，我希望在路径user/:username上加载组件(UserComponent)-如果:username之后路径为空，我想在UserComponent内定义的路由器中加载UserDefaultContentComponent-如果路径具有类似user/some-user/other的扩展名，我希望将UserOtherComponent加载到插座中.但是总是在user/:username上加载了UserComponent-示例user/some-user

Specifically I want a component (UserComponent) loaded on the route user/:username - if the path is empty after the :username I want to load UserDefaultContentComponent in the router defined inside the UserComponent - If the path is having an extension like user/some-user/other I want the UserOtherComponent to load in the outlet. But ALWAYS have UserComponent loaded on user/:username - example user/some-user

打破这一局面的理论

因此，我创建的配置在尝试解析子路由时出现错误.我能够在没有延迟加载的情况下在空用户路径上加载UserComponent.

So the configuration I have created I am getting errors when I try to resolve the child routes. I was able to load UserComponent on empty user path without the lazyloading.

我还认为将静态子路由转换为动态:username路由可以解决此问题.

I also think having static subroutes to a dynamic :username route is caursing the issue.

配置

有关完整代码，请参见 stackblitz

For full code see the stackblitz

下面是我发现相关的代码.如果我在这里缺少什么，请发表评论:

Below is the code I find relevant. Please comment if I am missing something here:

应用程序路由(根路由)

App Routing (Root routing)

const APP_ROUTES: Routes = [
    { path: '', component: AppComponent, data: { state: 'home' }},
    { path: 'user/:username', loadChildren: './user-module/user.module#UserModule'}
];

export const appRouting = RouterModule.forRoot(APP_ROUTES); 

用户路由(子路由)

const USER_ROUTES: Routes = [
    { path: '', component: UserComponent, children: [
      { path: '', component: UserDefaultContentComponent, outlet: 'user-outlet'},
      { path: 'other', component: UserOtherComponent, outlet: 'user-outlet'},
    ]}
];

export const userRouting = RouterModule.forChild(USER_ROUTES);

这些的导入位于UserModule&中；应用模块.我还从用户模块导出子路由.

Imports of those is in the UserModule & the App module. I am also exporting the child routes from the User Module.

UserComponent-包含命名的路由器出口:

UserComponent - contains the named router outlet:

<div>
  THIS IS A USER
</div>

<router-outlet name="user-outlet"></router-outlet>

要测试的网址

此网址应加载UserOtherComponent:/user/hello/other 该网址应加载UserDefaultContentComponent:/user/hello 两者均应加载到命名路由器出口内-因此，在两种情况下，均应加载UserComponent.

This url should load UserOtherComponent: /user/hello/other This url should load UserDefaultContentComponent: /user/hello Both should load inside the named router-outlet - So in both cases the UserComponent should load.

当我尝试加载UserOtherComponent(或任何定义的子路径)时，得到以下控制台输出:

I get this console output when I am trying to load UserOtherComponent (or any defined subpath):

错误错误:未捕获(承诺):错误:无法匹配任何路由.网址段:用户/您好/其他" 错误:无法匹配任何路线.网址段:用户/您好/其他"

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'user/hello/other' Error: Cannot match any routes. URL Segment: 'user/hello/other'

虽然子路由为空，但没有控制台错误，但未加载UserComponent.在我自己的项目中(不是此复制)，我加载了UserComponent-我似乎无法弄清楚为什么空路径在我自己的项目中起作用.也许这些信息是有帮助的.

While with an empty sub route I get no console error, but the UserComponent isn't loaded. In my own project (Not this reproduction) I get the UserComponent loaded - I can't seem to figure out why the empty path works in my own project. Maybe that information is of help.

在应用程序组件中添加了缺少的路由器插座.现在，我回到我在整个项目中遇到的确切问题.

Added the missing router-outlet in the app component. Now I am back to the exact issue I have in my full project.

路由user/user呈现UserDefaultContentComponent. user/user/other仍然不起作用

the route user/user renders UserDefaultContentComponent. user/user/other still doesn't work

推荐答案

您忘记在app.component.html

更新您的APP_ROUTES

const APP_ROUTES: Routes = [
    { path: '', component: HelloComponent, data: { state: 'home' }},
    { path: 'user', loadChildren: './user-module/user.module#UserModule'}
];

和您的USER_ROUTE

const USER_ROUTES: Routes = [
    { path: ':username', component: UserComponent, children: [
      { path: '', component: UserDefaultContentComponent},
      { path: 'other', component: UserOtherComponent},
    ]}
];

然后替换

<router-outlet name="user-outlet"></router-outlet>

通过

<router-outlet></router-outlet>

这篇关于带出口的角lazyload子路线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！