Angular @Input getter/setter 和非原始值

Posted 2023-03-13

【中文标题】Angular @Input getter/setter 和非原始值

【英文标题】：Angular @Input getter/setter and non-primitive values

【发布时间】：2018-08-03 22:58:06

【问题描述】：

问题：我希望能够在每次绑定子组件的对象中的属性发生变化时调用一个函数。但是，setter 只被调用一次，即使可以看到绑定的输入属性正在更新。

这一切都是因为需要将子组件绑定到其父组件属性，该属性恰好是具有深度嵌套属性的复杂对象。我了解到，当对象中的嵌套属性发生更改时，Angular onChange 事件不会触发。因此决定使用 getter/setter。但是，正如这个问题所见，使用 getter/setter 也不起作用。从那以后，我将子组件更改为订阅父组件订阅的同一 Observable，从而直接从服务接收更新并一起绕过父组件。我对 Angulars 绑定和 TypeScript getter/setter 进行了大量研究，从各方面来看，我的代码看起来都可以正常工作，但事实并非如此。

目标：了解为什么使用带有 getter/setter 的 @Input 绑定到子组件中的父组件属性对于非原始类型无法按预期工作。是我遗漏了一个基本概念还是我的代码中存在实现错误？

我将在此处展示一些源代码，并附上 StackBlitz 以供任何想亲眼目睹它的人使用。 StackBlitz Live Demo

模拟数据.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（父 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;
  

【问题讨论】：

setter 只调用一次，因为传递的对象始终是同一个对象。它的 状态 发生变化，但这不会触发输入变化。

为什么我可以看到子组件hten中'target'属性的值正在更新？是不是因为第一次调用 setter 时子组件属性 displayNumberObj 现在持有对原始对象的引用，所以它会自动更新而无需调用 setter？ @JBNizet

这很有意义。我没有认识到对象中属性的值发生变化并不会改变对象，而是改变了该对象的状态。所以对象 A 仍然是对象 A 并且 Angulars 更改检测不知道状态更改，因此为什么 @Input 绑定永远不会触发 setter。看来我还有很多东西要学，你给了我一个很好的起点。非常感谢您的回复和时间。

这种行为在文档中有进一步的解释，虽然有点难找，请查看angular.io/guide/lifecycle-hooks#onchanges的gif +解释

该 gif 清晰地描绘了 Angular 如何对状态变化做出反应，或者更多，对状态变化没有反应。最初，我没有根据更改检测在 OnChanges 事件和 @Input 装饰器之间建立关联。我认为如果 onChanges 不起作用，那么我可以在绑定上使用 setter，但忽略了绑定本身依赖于相同的更改检测。感谢您在 Jota.Toledo 文档中指出该信息

【参考方案1】：

这有两个部分：

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

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

从 1 开始，我们需要了解 Angulars 更改检测如何应用于非原始数据。

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

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

当数据绑定属性的值发生变化时，Angulars 会触发变化检测。但是，当绑定到的属性是 ObjA 之类的对象时，绑定到的是 ObjA 的引用，而不是对象本身。正是由于这个原因，当ObjA 中的属性值发生更改（状态更改）时，Angulars 更改检测不会触发。 Angular 不知道ObjA 的状态，而是对ObjA 的引用。

感谢@JBNizet 和@Jota.Toledo 为我提供了理解该主题所需的信息（在上述cmets 中）。

【讨论】：

换句话说，由于您的回答，这是不可能的，感谢 Narm 的澄清！