Angular @Input getter/setter 和 non-primitive 值

Question

问题： 我希望每次绑定 object 中的属性和 child 组件时都能调用一个函数改变。但是，setter 只被调用一次，即使可以明显看到绑定输入属性正在更新。

这一切都是由于需要将 child 组件绑定到它的 parent 组件属性而恰好是一个复杂的 object 且嵌套很深特性。我了解到，当 object 中的嵌套属性更改时，Angular onChange 事件不会触发。因此决定使用 getters/setters 代替。但是，正如这个问题所见，使用 getters/setters 也不起作用。从那以后，我更改了 child 组件以订阅与 parent 组件订阅的同一个 Observable，从而直接从服务接收更新并一起绕过 parent 组件。我对 Angulars 绑定和 TypeScript getters/setters 进行了大量研究，从各方面来看，我的代码似乎可以正常工作，但事实并非如此。

目标： 理解为什么通过使用带有 [=43 的 @Input 绑定到 child 组件中的 parent 组件=] 对 non-primative 类型没有预期的效果。我是否遗漏了一个基本概念，或者我的代码中是否存在实现错误？

我将在此处展示一些源代码，并附上一个 StackBlitz 供任何想实际观看的人使用。 StackBlitz Live Demo

mock-data.service.ts

@Injectable()
export class MockDataService {
  public updateSubject: Subject<any> = new Subject();
  public numObj = {
    'prop1': 'stuff',
    'prop2': 'stuff',
    'prop3': 'stuff',
    'prop4': 'stuff',
    'level1': {
      'level2': {
        'target': 0 //target is the prop that will be getting updated
      }
    }
  }
  constructor() {
    this.startDemo();
  }
  private startDemo(): void {
    //This is simulating the server sending updates
    //to the numObj
    setInterval(() => {
      this.numObj.level1.level2.target += 1;
      this.update();
    }, 4000);
  }
  private update(): void {
    try {
      this.updateSubject.next(this.numObj);
    } catch (err) {
      this.updateSubject.error(err);
    }
  }
}

app.component.ts (parent cmp)

app.component.html <child-cmp [targetNumber]="targetNumber"></child-cmp>

export class AppComponent implements OnInit {
  public targetNumber: any;
  public displayCurrentNumber: number;
  constructor(private mockDataService: MockDataService){}
  ngOnInit(){
    this.mockDataService.updateSubject.subscribe({
      next:(data) => this.onUpdate(data),
      error: (error) => alert(error),
    });
  }
  private onUpdate(data: any): void{
    if(data){
      this.targetNumber = data;
      this.displayCurrentNumber = data.level1.level2.target;
    }
  }
}

child-cmp.component.ts

export class ChildCmpComponent {
  private _targetNum: any;
  public displayNumberObj: any;
  public displayNumber: number;
  public changeArray: string[] = [];
  @Input() 
  set targetNumber(target: any){
    this.changeArray.push('Setter(),');
    this._targetNum = target;
    this.setDisplay(this._targetNum);
  }
  get targetNumber(): any{
    this.changeArray.push('Getter(),');
    return this._targetNum;
  }
  private setDisplay(target: any): void{
    this.changeArray.push('setDisplay(),');
    this.displayNumberObj = target;
    this.displayNumber = target.level1.level2.target;
  }
}

Answer 1

这有两个部分：

认识到 @Input 装饰器仅在更改检测期间更新，因此分配给绑定数据的 setter 仅在更改检测期间触发。 Angular 源代码的前两行注释中清楚地说明了这一事实。

export interface InputDecorator { /** * Declares a data-bound input property. * * Angular automatically updates data-bound properties during change detection. *

从 1 开始，我们需要 了解 Angular 变化检测如何应用于 non-primatives。

为了帮助解释这一点，我将使用以下对象 ObjA：

public ObjA = {
    'prop1': 'value1',
    'prop2': 'value2'
  }

Angulars 变化检测在数据绑定属性的值发生变化 时触发。然而，当属性被绑定到一个像 ObjA 这样的对象时，绑定到的是 ObjA 的引用，而不是对象本身。正是出于这个原因，当 ObjA 中的属性值发生变化（状态变化）时，Angular 的变化检测不会触发。 Angular 不知道 ObjA 的状态，而是对 ObjA.

的引用

感谢@JBNizet 和@Jota.Toledo 为我提供了我需要理解这个主题的信息（在上面的评论中）。

Angular @Input getter/setter 和 non-primitive 值

Angular @Input getter/setter and non-primitive values

typescript

angular-components

angular

mock-data.service.ts

app.component.ts (parent cmp)

child-cmp.component.ts