当前位置: 首页 > 知识库问答 >
问题:

Angular@输入getter/setter和非原始值

申屠泉
2023-03-14

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

这一切都源于需要将子组件绑定到其父组件属性,该属性恰好是具有深度嵌套属性的复杂对象。我了解到,当对象中的嵌套属性发生更改时,Angular onChange 事件不会触发。因此决定改用吸气剂/二传手。然而,正如这个问题所见,使用吸气剂/设置器也不起作用。此后,我将子组件更改为订阅父组件所订阅的同一 Observable,从而直接从服务接收更新并一起绕过父组件。我已经对 Angulars 绑定和 TypeScript getters/setter 做了很多研究,从各方面来看,它看起来像我的代码显示工作,但事实并非如此。

目标:了解为什么将 @Input 与 getter/setter 一起使用绑定到子组件中的父组件属性对于非原始类型无法按预期工作。我是否缺少基本概念,或者我的代码中是否存在实现错误?

我将在这里展示一些源代码,并附上一个StackBlitz,供任何想看到它实际运行的人使用。StackBlitz现场演示

@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.html

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;
    }
  }
}
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;
  }
}

共有1个答案

卫嘉泽
2023-03-14
匿名用户

这包括两个部分:

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

< code > export interface input decorator {/* * *声明一个数据绑定输入属性。* * Angular在更改检测期间自动更新数据绑定属性。*

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

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

当数据绑定属性的值更改时,触发角度更改检测。但是,当绑定到的属性是像< code>ObjA这样的对象时,绑定到的是< code>ObjA的引用,而不是对象本身。因此,当< code>ObjA中的属性值发生变化(状态变化)时,Angulars变化检测不会触发。Angular不知道< code>ObjA的状态,而是知道对< code>ObjA的引用。

感谢@JBNizet和@Jota。托莱多为我提供了理解这个主题所需的信息(在上面的评论中)。

 类似资料:
  • 我想使用 getter 和 setter 将输入值绑定到模型。通过这种方式,我可以在写入输入时阻止和/或操纵输入的值。 例如,我想要输入框中的防止数字。所以,如果写“abc”all是可以的,那么如果我开始写一个数字,应该不会发生任何事情(对模型和输入的值)。问题是,使用以下代码,我可以在输入框中写入任何东西(但模型是正确的)。这意味着输入框的值并不真正代表我的模型。 注意:这个问题之外的原因是我想

  • 问题内容: 我有两个Java类,一个包含getter和setter,另一个是驱动程序类。我需要来自驱动程序类中扫描程序的用户输入才能属于第一类中的getter。用户输入必须为double,因为它将用作getter中的公式。 问题答案: 真正最好的是将所有内容都放在一个类中,没有理由将一个类分成两个类,只是为了使获取器和设置器与其他类分开,这 没有任何意义 。我确实想知道您是否误解了您的作业。 现在

  • 问题内容: 始终建议使用getter / setter访问私有变量。为什么最好将它们声明为public并对其进行访问。无论如何,我们正在使用getter和setter访问它? 问题答案: @mre的回答非常好,您的问题很重要。总结一下:您将对象的字段设置为私有,以控制其他对象使用它的方式。您的对象使用setter来: 限制和验证传递给设置器的数据 隐藏其内部数据结构(服务对其他对象感兴趣,而不是服

  • 利用 getter/setter 可以拦截操作对象的属性,在设置属性前或获取属性前做一些事情。 1. getter get语法将对象属性绑定到查询该属性时将被调用的函数。(MDN) // 语法 var 对象 = { get 属性名() { // 做一些事情 balabala return 值; } }; getter 在获取一个属性时被调用,同时返回 getter 的返回

  • 我写了我自己的AST转换,它应该生成getter和setter方法(在这里创建getter方法)。但是他们不工作,不能理解原因。 使用属性创建注释 我的AST转换代码应该为注释字段创建getter方法 注释检查 在哪个地方我犯了错误? 运行结果: 线程“main”groovy中出现异常。lang.MissingMethodException:没有方法ua的签名。家插科打诨。用法实例getMyCou