代码之家 › 专栏 › 技术社区 › Philip Feldmann

即使内部值不变,组件getter触发器也会重新呈现

typescript angular

-1

Philip Feldmann · 技术社区 · 7 年前

我很难理解以下行为,我不是在寻找解决方法,我只是想了解为什么会这样:

我有一个非常基本的组件 {{ title }} 在我的模板中绑定。该标题绑定到返回新日期的getter。当只返回日期时,组件将只呈现一次,我认为这是预期的行为。

但是,当我添加 setInterval 在我的 ngOnInit 更新 完全不同的价值 ,视图将用新日期重新呈现。为什么?视图中没有数据绑定到 _test 价值。

export class AppComponent implements OnInit {
  private _test: string = " ";

  public get title(): string {
    return new Date().toUTCString();
  }

  public ngOnInit(): void {
    setInterval(() => {
      this._test = "";
    }, 1000);
  }
}

这里有一个 Codesandbox 如果你想看它的行动。我不想在这里找解决办法,只是想了解发生了什么。

1 回复 | 直到 7 年前

1

JB Nizet 7 年前

这就是变化检测的工作原理: setTimeout 回调被执行,Angular知道这要感谢zone.js,但它不可能知道回调在做什么。因此,它重新评估模板中使用的所有表达式,以了解它们的值是否已更改,如果已更改,它将相应地修改dom。

从模板中绑定的getter返回一个新日期是一个糟糕的想法:getter将在每次更改检测时被调用,并且返回的值总是不同的。你绝对不想那样。getter应该是等幂的:当连续调用两次时,它应该返回相同的值。