Angular同页面子组件为何category需等待ArticleView的resolve完成才渲染

你遇到的情况属于Angular路由的正常设计表现。

• Angular路由的Resolve守卫的核心机制是：当前路由配置的所有Resolve异步逻辑执行完成前，不会渲染该路由绑定的组件，以及该组件模板内的所有子级、同级组件。
  你当前访问的是如下配置的路由：

{path: 'article-view/:id', component: ArticleViewComponent , resolve: { article: ArticleDataResolver }, data: {title: 'View Article'}}

你的页面模板内同时放置了两个同级子组件：

<app-category-list>
<article-view></article-view>

这两个组件都属于当前路由绑定的ArticleViewComponent的模板内容，因此哪怕的数据已经通过APP_INITIALIZER提前加载完成，也必须等待ArticleDataResolver的Promise执行完毕，才会跟着父路由组件一起被初始化渲染。

• APP_INITIALIZER只会阻塞应用的整体初始化流程，不会改变路由Resolve守卫对当前路由组件树的渲染阻塞规则。

如果需要让不需要等待文章接口返回就提前渲染，可以选择两种调整方案：

• 将移动到更高层级的公共布局组件中（比如AppComponent、全局布局组件的模板），该层级组件不受当前子路由的Resolve守卫影响
• 移除路由上的resolve配置，改为在ArticleViewComponent的ngOnInit生命周期中主动调用接口获取文章数据，请求过程中给文章区域添加加载占位符，此时分类组件可以随父组件提前渲染。

内容的提问来源于stack exchange，提问作者madenGlitch