Angular 父组件渲染完成后订阅observable 解决子组件传值为空问题

问题核心原因 #

父组件的Product对象是异步接口返回的，子组件初始化渲染早于接口响应，此时Product.Categories还未赋值，因此子组件拿到的初始值为null。

可行解决方案 #

方案1：用*ngIf控制子组件渲染时机（最简单，适合绝大多数场景） #

父组件模板中新增判断，仅当Product和Categories存在时才渲染子组件，保证子组件初始化时就能拿到有效值：

<app-mag-b1-category
  *ngIf="Product?.Categories"
  [(recordValue)]="Product.Categories"
  (AddCategory)="addCategory($event)"
  (DeleteCategory)="deleteCategory($event)">
</app-mag-b1-category>

注意：如果需要子组件提前渲染占位，此方案不适用

方案2：子组件用setter监听输入属性变化（推荐，灵活性高） #

将子组件的recordValue输入属性改写为带set的存取器，每次父组件传入新值时自动触发处理逻辑：

// 子组件代码
private _recordValue: ProductCategory[];
@Input() 
set recordValue(val: ProductCategory[]) {
  this._recordValue = val;
  // 值更新时自动调用处理方法
  this.mapRecordValues();
}
get recordValue(): ProductCategory[] {
  return this._recordValue;
}

修改后可移除ngOnInit中对mapRecordValues的调用，避免重复执行

方案3：用ngOnChanges生命周期监听输入变化（适合多输入属性联动场景） #

子组件实现OnChanges接口，检测到recordValue更新且不为空时触发处理：

import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';

export class CategoryComponent implements OnChanges {
  @Input() recordValue: ProductCategory[];

  ngOnChanges(changes: SimpleChanges): void {
    const recordChange = changes['recordValue'];
    if (recordChange && recordChange.currentValue != null) {
      this.mapRecordValues();
    }
  }
}

现有代码优化建议 #

你当前mapRecordValues方法中，每次循环都订阅_flattenedData、_expandededData会产生大量重复订阅，存在内存泄漏风险：

• 带下划线前缀的属性属于类内部私有属性，不建议直接外部订阅
• 可将数据源订阅逻辑移到ngOnInit中只执行一次，处理分类时直接取最新的数据源值即可

内容的提问来源于stack exchange，提问作者James.mikael