有没有办法在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以避免阻塞显示