为什么在Angular 2服务中调用此方法/ gettor X次

Question

我试图将我的HTML组件中的值绑定到服务中的属性.如果私有变量为null,则需要关闭并从HTTP调用中获取值.

但是,我注意到,只要我绑定到HTML组件中的属性gettor,它就会多次触发.

我简化了这个例子: 这个Plunker

  get Item(): string {
      console.log("Item()", this._item);
      return this._item;
  }

打开控制台并观察"Item()Initiated"的多个输出.我希望它只被击中一次.(结果与方法相同,而不是gettor).如果我在点击方法中使用Gettor它只会触发一次.

Answer 1

这是因为每次在应用程序中"更改"某些内容时,都必须评估html上绑定的值,这样如果绑定项的值已更改,它将反映到html中,从而为您提供这种神奇的自动更新绑定.这可能是你想要的90%的情况,因为你不想担心通知角度来更新绑定属性的值.

这就是说,如果你在getter中有一些重要的逻辑,或者你更愿意控制何时更新该值,你可以将组件changeDetectionStrategy更改为onPush,就像在这个plunker中一样.

@Component({
  selector: 'my-app',
  template: `
    <div><button (click)="_service.ShowItem()">Show Item</button></div>
    <div>{{_service.Item}}</div>
  `,
  providers: [ Service ],
  changeDetection: ChangeDetectionStrategy.OnPush
})

还有就是angular2变化检测如何工作的一个很好的解释thoughtram

这就像是说,"在进行更改检测时不要检查此组件,我会告诉您何时检查它".

然后,您可以使用名为ChangeDetectorRef的服务来标记组件以进行更改检测.

对于http,您要做的是触发器来执行http调用,然后从响应中获取所需的值并将其"缓存"到某个位置,以便您可以将其绑定到UI.根据您的情况,触发器可以是各种各样的东西,例如.间隔,递归,按钮等