我试图将我的
HTML组件中的值绑定到服务中的属性.如果私有变量为null,则需要关闭并从HTTP调用中获取值.
但是,我注意到,只要我绑定到HTML组件中的属性gettor,它就会多次触发.
我简化了以下示例：
this Plunker
get Item(): string {
console.log("Item()",this._item);
return this._item;
}
打开控制台并观察“Item()Initiated”的多个输出.我希望它只被击中一次. (结果与方法相同,而不是gettor).如果我在点击方法中使用Gettor它只会触发一次.
这是因为每次在应用程序中“更改”某些内容时,都必须评估html上绑定的值,这样如果绑定项的值已更改,它将反映到html中,从而为您提供这种神奇的自动更新绑定.这可能是你想要的90％的情况,因为你不想担心通知角度来更新绑定属性的值.
话虽如此,如果你在getter中有一些重要的逻辑,或者你更愿意控制何时更新该值,你可以将组件changeDetectionStrategy更改为onPush,如in this plunker.
@Component({
selector: 'my-app',template: `
<div><button (click)="_service.ShowItem()">Show Item</button></div>
<div>{{_service.Item}}</div>
`,providers: [ Service ],changeDetection: ChangeDetectionStrategy.OnPush
})
关于角度变化检测如何在thoughtram之前工作的一个很好的解释
这就像是说,“在进行更改检测时不要检查此组件,我会告诉您何时检查它”.
然后,您可以使用名为ChangeDetectorRef的服务来标记组件以进行更改检测.
对于http,您要做的是触发器来执行http调用,然后从响应中获取所需的值并将其“缓存”到某个位置,以便您可以将其绑定到UI.根据您的情况,触发器可以是各种各样的东西,例如.间隔,递归,按钮等
