Angular如何订阅复杂层级组件输入的部分属性变化？

针对嵌套LayerGroup输入中仅需监听filter这类深层属性变化、避免全量刷新的问题，以下几种方案无需手动深对比，直接利用Angular内置能力或轻量库即可实现：

方案一：使用Angular内置的KeyValueDiffer与IterableDiffer #

Angular的变更检测系统提供了专门的Differ工具，能精准追踪对象和数组的增量变化，无需手动深对比。

实现步骤： #

1. 注入ChangeDetectorRef、KeyValueDiffers和IterableDiffers服务
2. 为layers数组创建IterableDiffer追踪数组的新增/删除，为每个非分组layer创建KeyValueDiffer追踪其属性变化
3. 在ngDoCheck钩子中检查Differ的变化，仅在filter属性变更时触发对应layer的视图更新

代码示例： #

import { Component, input, ChangeDetectorRef, KeyValueDiffers, IterableDiffers, DoCheck, KeyValueChangeRecord, IterableChangeRecord, ChangeDetectionStrategy } from '@angular/core';

export type VectorLayerDefinition = {
  name: string;
  filter: any;
  kind: 'vector';
};

export type TileLayerDefinition = {
  name: string;
  filter: any;
  kind: 'tile';
};

export type LayerGroup = {
  name: string;
  layers: Array<VectorLayerDefinition | TileLayerDefinition | LayerGroup>;
  kind: 'group';
};

@Component({
  selector: 'app-my-component',
  template: `
    <ng-container *ngFor="let layer of layerGroup().layers; trackBy: trackByLayer">
      <app-layer [layer]="layer" *ngIf="layer.kind !== 'group'"></app-layer>
      <app-my-component [layerGroup]="layer" *ngIf="layer.kind === 'group'"></app-my-component>
    </ng-container>
  `,
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class MyComponent implements DoCheck {
  layerGroup = input<LayerGroup>();
  private layerDiffer: any;
  private layerDiffers = new Map<any, any>();

  constructor(
    private cdr: ChangeDetectorRef,
    private keyValueDiffers: KeyValueDiffers,
    private iterableDiffers: IterableDiffers
  ) {}

  ngOnInit() {
    const group = this.layerGroup();
    if (!group) return;
    
    this.layerDiffer = this.iterableDiffers.find(group.layers).create();
    group.layers.forEach(layer => {
      if (layer.kind !== 'group') {
        this.layerDiffers.set(layer, this.keyValueDiffers.find(layer).create());
      }
    });
  }

  ngDoCheck() {
    const group = this.layerGroup();
    if (!group) return;

    // 检测layers数组的新增/删除
    const layerArrayChanges = this.layerDiffer.diff(group.layers);
    if (layerArrayChanges) {
      layerArrayChanges.forEachAddedItem(record => {
        if (record.item.kind !== 'group') {
          this.layerDiffers.set(record.item, this.keyValueDiffers.find(record.item).create());
        }
      });
      layerArrayChanges.forEachRemovedItem(record => {
        this.layerDiffers.delete(record.item);
      });
    }

    // 检测每个layer的属性变化，重点监听filter
    this.layerDiffers.forEach((differ, layer) => {
      const propChanges = differ.diff(layer);
      if (propChanges) {
        propChanges.forEachChangedItem(record => {
          if (record.key === 'filter') {
            // 触发对应layer的视图更新，如标记子组件变更检测
            this.cdr.markForCheck();
            console.log(`Layer ${layer.name} filter updated:`, record.currentValue);
          }
        });
      }
    });
  }

  trackByLayer(index: number, layer: any) {
    return `${layer.name}-${layer.kind}`;
  }
}

方案二：用RxJS监听深层属性变化 #

将输入转换为Observable，结合RxJS的distinctUntilChanged（内置深对比）过滤无意义的变更，再精准监听filter属性的变化。

代码示例： #

import { Component, input, OnInit, OnDestroy, ChangeDetectionStrategy } from '@angular/core';
import { toObservable, distinctUntilChanged, switchMap, merge, map, takeUntil } from '@angular/core/rxjs-interop';
import { Subject } from 'rxjs';
import { deepEqual } from 'rxjs/internal/util/deepEqual';

@Component({
  selector: 'app-my-component',
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class MyComponent implements OnInit, OnDestroy {
  layerGroup = input<LayerGroup>();
  private destroy$ = new Subject<void>();

  ngOnInit() {
    const layerGroup$ = toObservable(this.layerGroup).pipe(
      distinctUntilChanged(deepEqual),
      takeUntil(this.destroy$)
    );

    // 监听所有非分组layer的filter变化
    layerGroup$.pipe(
      switchMap(group => merge(
        ...group.layers.filter(layer => layer.kind !== 'group').map(layer => 
          toObservable(() => layer.filter).pipe(
            distinctUntilChanged(deepEqual),
            map(filter => ({ layer, filter }))
          )
        )
      )),
      takeUntil(this.destroy$)
    ).subscribe(({ layer, filter }) => {
      console.log(`Layer ${layer.name} filter updated:`, filter);
      this.cdr.markForCheck();
    });
  }

  ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

方案三：使用不可变数据（Immer）+ OnPush变更检测 #

通过不可变数据结构，让每次filter变更都生成新的对象引用，配合Angular的OnPush变更检测策略，自动仅更新受影响的子组件。

实现步骤： #

1. 安装Immer：npm install immer
2. 修改filter时，用Immer的produce生成新的嵌套对象，确保只有变更路径的引用更新
3. 组件启用OnPush变更检测，利用Angular的引用对比机制自动跳过未变更部分的检测

代码示例： #

首先是修改filter的逻辑：

import { produce } from 'immer';

// 假设当前的layerGroup状态
let currentLayerGroup: LayerGroup = {
  name: 'Root Group',
  kind: 'group',
  layers: [
    { name: 'Vector Layer', kind: 'vector', filter: {} }
  ]
};

// 更新某个layer的filter，生成新的不可变对象
currentLayerGroup = produce(currentLayerGroup, draft => {
  // 定位到目标layer，修改filter
  const targetLayer = draft.layers[0] as VectorLayerDefinition;
  targetLayer.filter = { newKey: 'newValue' };
});

// 将新对象传入组件的layerGroup输入

组件代码：

import { Component, input, ChangeDetectionStrategy } from '@angular/core';

@Component({
  selector: 'app-my-component',
  template: `
    <ng-container *ngFor="let layer of layerGroup().layers; trackBy: trackByLayer">
      <app-layer [layer]="layer" *ngIf="layer.kind !== 'group'"></app-layer>
      <app-my-component [layerGroup]="layer" *ngIf="layer.kind === 'group'"></app-my-component>
    </ng-container>
  `,
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class MyComponent {
  layerGroup = input<LayerGroup>();

  trackByLayer(index: number, layer: any) {
    return `${layer.name}-${layer.kind}`;
  }
}

子组件app-layer同样启用OnPush：

import { Component, input, ChangeDetectionStrategy } from '@angular/core';

@Component({
  selector: 'app-layer',
  template: `
    <div>{{ layer().name }}</div>
    <!-- 渲染filter相关视图 -->
  `,
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class LayerComponent {
  layer = input<VectorLayerDefinition | TileLayerDefinition>();
}

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