有没有一种方法可以在Angular中的子路由之前渲染父组件？

Question

我有一个在其中定义了路由器插座的组件（ParentComponent）。

<mat-accordion>some content</mat-accordion>
<mat-progress-bar *ngIf="loading"></mat-progress-bar>
<router-outlet></router-outlet>

我还有一个带有路由定义的路由器模块：

{path: 'parent', component: ParentComponent, children: {path: 'sub', loadChildren: () => import('./sub/sub.module').then(mod => mod.SubModule)}}

所以它懒惰地加载SubModule模块，该模块只有一个路径在解析了一些数据后才呈现：

{path: '', component: SubComponent, resolve: {data: SubResolverService}

默认情况下，用户先通过“父”路线，然后才使用按钮加载“父/子”，以便显示手风琴和载荷。

[但是，当URL被明确地写入并且我们直接进入'父/子'路线时，应用程序等待子解析器获取数据，只有在此之后，它才会呈现手风琴和进度条，因此用户必须盯着空白页，直到加载了每个路线数据。

是否有一种方法可以首先渲染父组件，仅在开始解析子路径之后才显示进度栏？

Answer 1

路由器等待解析器完成（事件子解析器）。解析器将数据同步带到组件。为了获得更好的用户体验，应在数据即时可用（例如配置数据）时使用解析器，否则应在组件内部使用Observable以避免阻塞显示。