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

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

  •  -1
  • Philip Feldmann  · 技术社区  · 6 年前

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

    我有一个非常基本的组件 {{ 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 回复  |  直到 6 年前
        1
  •  1
  •   JB Nizet    6 年前

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

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