Angular嵌套路由如何在子路由Resolver完成前优先渲染父组件

问题根因 #

Angular 路由的 Resolve 设计逻辑是：同一导航链路中所有层级路由的 Resolve 都执行完成后，才会统一渲染所有路由对应的组件，这就是两个组件会同时渲染的核心原因。

解决方案 #

方案1：组件内自行加载内容（最简便，推荐）

直接移除子路由的ContentResolver配置，在ContentComponent内部自行发起内容请求，搭配加载状态展示即可：

1. 调整路由配置：

const routes: Routes = [
  {
    path: '',
    component: PageWrapperComponent,
    resolve: {
      mainMenu: MainMenuResoler
    },
    children: [
      {
        path: '',
        component: ContentComponent
        // 移除原有的content resolve配置
      }
    ]
};

2. 在ContentComponent中处理内容加载逻辑：

@Component({
  template: `
    <div *ngIf="isLoading">内容加载中...</div>
    <div *ngIf="content">{{ content }}</div>
  `
})
export class ContentComponent implements OnInit {
  isLoading = true;
  content: any;

  constructor(private contentService: ContentService) {}

  ngOnInit() {
    this.contentService.getContent().subscribe(res => {
      this.content = res;
      this.isLoading = false;
    })
  }
}

该方案下，MainMenuResolver执行完成后PageWrapperComponent会立即渲染，主菜单优先展示，子路由的ContentComponent渲染后自行拉取内容，加载完成后再展示实际内容，完全符合预期。

方案2：保留Resolver复用逻辑

如果需要保留ContentResolver的逻辑复用，可以将Resolver的逻辑改成手动调用，不依赖路由自动注入：

1. 路由配置和方案1一致，移除子路由的resolve配置
2. 在ContentComponent中手动执行Resolver：

export class ContentComponent implements OnInit {
  constructor(
    private contentResolver: ContentResolver,
    private route: ActivatedRoute,
    private router: Router
  ) {}

  ngOnInit() {
    this.contentResolver.resolve(this.route.snapshot, this.router.routerState.snapshot)
      .subscribe(content => {
        // 处理内容渲染逻辑
      })
  }
}

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