Angular如何实现视图一次性加载而非逐步显示？

可以通过控制显示时机+子组件加载状态通知的方式实现，核心思路是让所有tran-p组件加载完成后，再把整个容器显示出来。

步骤1：父组件添加状态控制变量 #

在父组件类里定义变量跟踪子组件加载进度：

allLoaded = false; // 所有组件是否加载完成的标志
loadedCount = 0; // 已加载完成的组件数量
totalComponents = 0; // 总组件数量

在ngOnInit中初始化总组件数：

ngOnInit() {
  this.totalComponents = this.pMap.size;
}

步骤2：父组件实现加载完成回调 #

添加方法，每次子组件加载完成时调用，当所有组件加载完毕，切换显示标志：

onComponentLoaded() {
  this.loadedCount++;
  if (this.loadedCount === this.totalComponents) {
    this.allLoaded = true;
  }
}

步骤3：修改子组件，添加加载完成事件 #

在tran-p组件中添加输出事件，当自身加载完成（含内部数据加载）时通知父组件：

import { Component, Input, Output, EventEmitter, AfterViewInit } from '@angular/core';

@Component({
  selector: 'tran-p',
  // 组件模板与样式
})
export class TranPComponent implements AfterViewInit {
  @Input() pArr: any[];
  @Input() statusP: any;
  @Output() loaded = new EventEmitter<void>();

  ngAfterViewInit() {
    // 若组件有异步数据请求，将emit放在请求完成回调中
    // 示例：
    // this.dataService.fetchData(this.pArr).subscribe(() => {
    //   this.loaded.emit();
    // });

    // 仅组件渲染完成的话，直接触发事件
    this.loaded.emit();
  }
}

步骤4：修改父组件模板，控制显示时机 #

用*ngIf或[hidden]包裹循环容器，仅当allLoaded为true时显示：

<!-- *ngIf会在加载完成前不渲染组件，性能更优 -->
<div *ngIf="allLoaded">
  <div *ngFor='let arr of pMap |keyvalue;let i=index'>
    <div>
      {{titles[arr.key]}}
      <tran-p [pArr]='arr.value' [statusP]='arr.key' (loaded)="onComponentLoaded()"></tran-p>
    </div>
  </div>
</div>

<!-- 若需预加载组件，可改用[hidden] -->
<!-- <div [hidden]="!allLoaded">
  ... 循环内容 ...
</div> -->

补充说明 #

• 如果tran-p的加载核心是异步数据请求，务必把loaded.emit()放在请求完成的回调里，确保数据加载完毕才标记完成。
• 若不想修改子组件，可通过@ViewChildren监听所有tran-p的状态，但需要子组件暴露加载完成的变量，不如输出事件直观。

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