Angular 带有出口的延迟加载子路由

Question

我已尝试在 stackblitz

中重现我的错误

我想完成的事情

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

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

具体来说，我想在路由 user/:username 上加载一个组件 (UserComponent) - 如果在 :username 之后路径为空，我想在 UserDefaultContentComponent 中加载UserComponent 内定义的路由器 - 如果路径有像 user/some-user/other 这样的扩展名，我希望 UserOtherComponent 加载到插座中。但总是在 user/:username 上加载 UserComponent - 例如 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>

要测试的网址

这个 url 应该加载 UserOtherComponent：/user/hello/other url 应该加载 UserDefaultContentComponent：/user/hello 两者都应该加载到指定的 router-outlet 中——所以在这两种情况下，UserComponent 都应该加载。

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

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 - 我似乎无法弄清楚为什么空路径在我自己的项目中有效。也许这些信息有帮助。

编辑：

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

路由 user/user 呈现 UserDefaultContentComponent。 user/user/other 还是不行

Answer 1

您忘记在 app.component.html

中添加 <router-outlet></router-outlet>

编辑：

更新你的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>

Angular 带有出口的延迟加载子路由

Angular lazyload child routes with outlet

angular-routing

angular

angular-router