Angular中能否先渲染父组件再加载子路由？

这个问题我之前在项目里也遇到过，核心原因是Angular的路由Resolver会在整个路由链路（包括父路由和子路由）完全激活前完成所有数据解析，所以直接访问parent/sub时，父组件会等待子路由的Resolver完成后才会渲染。下面是两个经过实践验证的可行解决思路：

方案1：将数据解析逻辑从路由Resolver迁移到子组件 #

这是最符合Angular组件化设计的方案，把原本放在SubResolverService里的数据获取逻辑移到SubComponent内部，同时通过共享服务同步加载状态给父组件：

步骤1：创建共享加载状态服务 #

这个服务用来在父组件和子组件之间传递加载状态：

import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class LoadingStateService {
  private readonly loading$ = new BehaviorSubject<boolean>(false);

  get loadingStatus(): Observable<boolean> {
    return this.loading$.asObservable();
  }

  setLoading(isLoading: boolean): void {
    this.loading$.next(isLoading);
  }
}

步骤2：修改子组件，在内部处理数据解析 #

在SubComponent的ngOnInit钩子中触发数据获取，并通过共享服务更新加载状态：

import { Component, OnInit } from '@angular/core';
import { SubService } from './sub.service';
import { LoadingStateService } from '../loading-state.service';

@Component({
  selector: 'app-sub',
  templateUrl: './sub.component.html'
})
export class SubComponent implements OnInit {
  data: any;

  constructor(
    private subService: SubService,
    private loadingService: LoadingStateService
  ) {}

  ngOnInit(): void {
    // 通知父组件开始加载
    this.loadingService.setLoading(true);
    
    this.subService.fetchRequiredData().subscribe({
      next: (response) => {
        this.data = response;
        // 加载完成，更新状态
        this.loadingService.setLoading(false);
      },
      error: (err) => {
        console.error('数据加载失败:', err);
        this.loadingService.setLoading(false);
        // 这里可以添加错误提示逻辑
      }
    });
  }
}

步骤3：修改父组件，订阅加载状态 #

父组件通过共享服务订阅加载状态，控制进度条的显示：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { LoadingStateService } from './loading-state.service';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html'
})
export class ParentComponent implements OnInit, OnDestroy {
  loading = false;
  private loadingSubscription?: Subscription;

  constructor(private loadingService: LoadingStateService) {}

  ngOnInit(): void {
    this.loadingSubscription = this.loadingService.loadingStatus.subscribe(
      status => this.loading = status
    );
  }

  ngOnDestroy(): void {
    this.loadingSubscription?.unsubscribe();
  }
}

步骤4：更新路由配置 #

移除子路由的resolve配置，恢复正常的懒加载：

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

这样修改后，无论用户是从parent导航到parent/sub，还是直接访问parent/sub，父组件都会立即渲染，进度条会在子组件加载数据时显示，完美解决空白页面的问题。

方案2：手动加载子组件（适合高自定义需求场景） #

如果需要更细粒度的控制加载时机，可以放弃路由的自动懒加载，改为在父组件中手动加载子组件：

步骤1：修改父组件模板 #

用一个容器占位符替换router-outlet：

<mat-accordion>some content</mat-accordion>
<mat-progress-bar *ngIf="loading"></mat-progress-bar>
<div #subComponentHost></div>

步骤2：父组件中手动处理路由和组件加载 #

通过Angular的ComponentFactoryResolver手动加载子组件，同时控制数据解析时机：

import { Component, ViewChild, ViewContainerRef, OnInit, OnDestroy } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { filter, Subscription } from 'rxjs';
import { ComponentFactoryResolver } from '@angular/core';
import { SubResolverService } from './sub/sub-resolver.service';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html'
})
export class ParentComponent implements OnInit, OnDestroy {
  @ViewChild('subComponentHost', { read: ViewContainerRef }) subHost!: ViewContainerRef;
  loading = false;
  private routerSubscription?: Subscription;

  constructor(
    private router: Router,
    private cfr: ComponentFactoryResolver,
    private subResolver: SubResolverService
  ) {}

  ngOnInit(): void {
    this.routerSubscription = this.router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    ).subscribe(async (event) => {
      const url = (event as NavigationEnd).url;
      if (url.includes('/parent/sub')) {
        await this.loadSubComponent();
      } else {
        this.subHost.clear();
      }
    });
  }

  private async loadSubComponent(): Promise<void> {
    this.loading = true;
    try {
      // 先执行数据解析逻辑
      const resolvedData = await this.subResolver.resolve(null!, null!);
      // 懒加载子组件
      const { SubComponent } = await import('./sub/sub.component');
      const componentFactory = this.cfr.resolveComponentFactory(SubComponent);
      const componentRef = this.subHost.createComponent(componentFactory);
      // 将解析后的数据传入子组件
      componentRef.instance.data = resolvedData;
    } catch (err) {
      console.error('加载子组件失败:', err);
    } finally {
      this.loading = false;
    }
  }

  ngOnDestroy(): void {
    this.routerSubscription?.unsubscribe();
  }
}

步骤3：调整路由配置 #

将parent/sub路由指向父组件，让父组件处理子组件的加载：

{
  path: 'parent',
  component: ParentComponent,
  children: [
    { path: 'sub', component: ParentComponent }
  ]
}

这个方案的优势是完全控制加载流程，但需要手动处理路由和组件生命周期，适合特殊业务场景。

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