Angular 11中NgxAdmin加载嵌套表单数据卡顿问题优化咨询

针对你遇到的嵌套表单（6个区域×8个promotionDeals，每个含4个下拉框）导致的加载、新增操作卡顿问题，以下是针对性的优化方案：

1. 启用OnPush变更检测策略 #

给promotionDeal子组件设置OnPush变更检测，组件仅在输入属性变化或自身触发事件时执行变更检测，大幅减少不必要的检测开销：

@Component({
  selector: 'app-promotion-deal',
  templateUrl: './promotion-deal.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class PromotionDealComponent {
  @Input() dealData: PromotionDeal;
}

2. 给下拉框*ngFor添加trackBy函数 #

Angular默认通过对象引用对比数组项，添加trackBy让它基于唯一ID识别项变化，避免不必要的DOM重建：

<!-- 下拉框模板示例 -->
<select [(ngModel)]="deal.selectedOption">
  <option *ngFor="let option of options; trackBy: trackByOptionId" [value]="option.id">
    {{option.name}}
  </option>
</select>

对应组件逻辑：

trackByOptionId(index: number, option: any): number {
  return option.id; // 确保每个选项有唯一标识
}

3. 用虚拟滚动优化大量下拉选项 #

如果下拉选项数量较多（比如超过50个），使用Angular CDK的虚拟滚动组件，只渲染可视区域内的选项，减少DOM节点数量：

<select>
  <cdk-virtual-scroll-viewport itemSize="32">
    <option *cdkVirtualFor="let option of options; trackBy: trackByOptionId" [value]="option.id">
      {{option.name}}
    </option>
  </cdk-virtual-scroll-viewport>
</select>

需要先在模块中导入ScrollerModule。

4. 缓存下拉选项数据 #

如果多个下拉框使用相同的选项列表（比如区域、促销类型），在服务层缓存数据，避免重复请求或生成：

@Injectable({ providedIn: 'root' })
export class PromotionOptionsService {
  private cachedOptions: { [key: string]: any[] } = {};

  getOptions(type: string): Observable<any[]> {
    if (this.cachedOptions[type]) {
      return of(this.cachedOptions[type]);
    }
    return this.http.get<any[]>(`/api/options/${type}`).pipe(
      tap(options => this.cachedOptions[type] = options)
    );
  }
}

5. 延迟加载非初始可见的promotionDeal #

初始只渲染可视范围内的promotionDeal，其余通过条件渲染延迟加载，降低初始DOM渲染压力：

<div *ngFor="let region of flightRegionPromotions; let i = index">
  <app-promotion-region [regionData]="region" *ngIf="i < 2 || showAllRegions"></app-promotion-region>
</div>
<button (click)="showAllRegions = true">加载全部区域</button>

6. 拆分大表单为独立子组件 #

将flightRegionPromotions和promotionDeals拆分为独立子组件，缩小每个组件的变更检测范围，避免单个组件变更触发整个大表单的检测。

7. 避免模板中使用复杂表达式 #

不要在下拉框的*ngFor或绑定中直接调用函数，提前在组件中计算好数据并赋值给属性，模板直接引用：

// 组件中提前计算
dealOptions: any[];

ngOnInit(): void {
  this.dealOptions = this.optionsService.getCachedOptions('deal-types');
}

<select>
  <option *ngFor="let option of dealOptions; trackBy: trackByOptionId" [value]="option.id">{{option.name}}</option>
</select>

8. 优化响应式表单控件创建 #

如果使用Reactive Forms，预创建表单控件模板，新增promotionDeal时直接复用，避免重复创建控件的开销：

// 预创建表单控件模板
private createDealFormGroup(): FormGroup {
  return this.fb.group({
    option1: [''],
    option2: [''],
    // 其他下拉框控件
  });
}

// 新增deal时复用模板
addPromotionDeal(regionIndex: number): void {
  const regionForm = this.flightRegionForm.get(`regions[${regionIndex}]`) as FormGroup;
  const dealsArray = regionForm.get('promotionDeals') as FormArray;
  dealsArray.push(this.createDealFormGroup());
}

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