Question

我尝试在stackblitz中重现我的错误

我要完成的任务

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

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

具体地说，我希望在路由UserComponent上加载组件（user/:username-如果在:username之后路径为空，我想在定义的路由器中加载UserDefaultContentComponent在UserComponent内部-如果路径具有扩展名，例如user/some-user/other，我希望UserOtherComponent加载到插座中。但是始终在UserComponent上加载了user/:username-示例user/some-user

打破这一局面的理论

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

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

配置

有关完整代码，请参见stackblitz

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

应用程序路由（根路由）

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和App模块中。我还从用户模块导出子路由。

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

<div>
  THIS IS A USER
</div>

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

测试网址

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

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

错误错误：未捕获（承诺）：错误：无法匹配任何路由。网址段：“用户/您好/其他” 错误：无法匹配任何路线。网址段：“用户/您好/其他”

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

编辑：

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

路由user/user呈现UserDefaultContentComponent。 user/user/other仍然无效

带插座的角型lazyload子路线

0 个答案: