如何引发Angular2变化检测？

问题描述

我创建Facebook的服务调用Facebook的JavaScript API第，我想知道如何最好地实现变化检测，当我的值将被更新。

我有一个 UserService 具有的currentUser 属性，它是一个BehaviorSubject：

 的currentUser：主题＆lt;使用者＆GT; =新BehaviorSubject＆lt;使用者＆GT;（新用户（空））;
 

而当我想回应的JavaScript SDK告诉我，在用户登录或注销Facebook的更新用户，我更新，需要调用打勾（）上的 ApplicationRef ：

  UpdateUser两个（用户：用户）{
  的console.log（'UserService.updateUser：用户）;
  this.currentUser.next（用户）;
  this.ap pref.tick（）; //用户界面不会没有此更新
}构造函数（脸谱：脸谱）{
  this.facebook.facebookEvents.filter（X =＆GT;！x =空
         ＆功放;＆安培; x.eventName =='auth.authResponseChange'）
      .subscribe（（事件）=＆GT; {
        this.updateUser（新用户（Event.data中））;
      }
}
 

在我的部分，我从用户服务的currentUser存储在构造函数并绑定到value属性：

 ＆LT; H2＆GT;登录到Facebook的为{{currentUser.value.name}}＆LT; / H＆GT;
＆LT; P＆gt;这是你吗？ ＆安培; NBSP; ＆所述; IMG SRC ={{currentUser.value.profilePicUrl}}＆GT;＆下; / P＆GT;
 

我是不是做错了什么？难道还有比具有外部库引发的变化之后调用ApplicationRef.tick（）更好的办法？

修改

我试着用NgZone并不起作用，使用在饲料通过他们的服务页面返回职位不同的事件：

 构造函数（userService：UserService，私人REF：ApplicationRef，民营区：NgZone）...this.postsSubject.subscribe（（后）=＆GT; {
  this.zone.runOutsideAngular（（）=＆GT; {//什么都不做
    this.posts.push（岗位）;
    的console.log（'postsSubject POST，计数为，this.posts.length）;
    ref.tick（）; //需要更新绑定
  }）;
}
 

控制台显示计数递增，但是HTML结合 {{} posts.length} 如果我添加只更新了 ref.tick （）电话...

我想我看到的地方，你可以从中可能是去为登录用户的方式的顶级应用程序组件使可用的输入到任何组件，而不是其他的呼叫就像在饲料获得职位。 ..

解决方案

It depends. If you're calling the Facebook APIs outside of Angular (i.e., registering asynchronous event handlers outside Angular), then you'll need to manually run change detection as part of handling any events. You can either

• inject NgZone and then call run() on that object, which will execute the passed (callback) function inside the Angular zone and then automatically call ApplicationRef().tick(), which will run change detection for the entire app, or
• inject ApplicationRef and call tick() yourself, or
• inject ChangeDetectorRef and call detectChanges() yourself -- this will only run change detection on the one component and its children

Note, if you inject NgZone, you don't want to use runOutsideAngular(). That will execute the passed (callback) function outside the Angular zone, and it will not call ApplicationRef().tick(), so change detection will not execute.

If you call the Facebook APIs inside Angular, you might be able to avoid all of the above, because then Angular (via its use of Zone.js) should monkey-patch the asynchronous event calls. Then, when your events fire, ApplicationRef.tick() will automatically be called. See http://stackoverflow.com/a/34593821/215945 for more discussion on this approach.

这篇关于如何引发Angular2变化检测？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！