javascript - Angular 2 在箭头函数中更新 var - Facebook

Question

(对不起我的英语)

您好，我仍在使用 Angular 2 和 TypeScript 开发我的 Facebook 登录网站。之前有人帮我做箭头功能，现在我无法在屏幕上显示用户信息。
登录成功完成，this.user 收到用户数据，但该信息出现在屏幕上必须执行某些操作，例如，按下按钮(即使没有某些事件)。

代码(app.component.ts):

import {Component} from 'angular2/core';
import {Main} from './pages/main/main';

declare const FB: any;

@Component({
  selector: 'my-app',
  templateUrl: 'app/app.html',
  directives: [Main]
})
export class AppComponent implements OnInit { 

token: any;
loged: boolean = false;
window.user = { name: 'Hello' };

constructor() { }

statusChangeCallback(response: any) {
    if (response.status === 'connected')
        this.me();
    else
        this.login();
}

login() {
    FB.login((result: any) => {
        this.loged = true;
        this.token = result;
        this.me();
    }, { scope: 'user_friends' });
}

me() {
    FB.api('/me?fields=id,name,first_name,gender,picture.width(150).height(150),age_range,friends',
        (result: any) => {
            console.log(result);
            this.user = result;
        });
}

ngOnInit() {
    FB.getLoginStatus(response => {
        this.statusChangeCallback(response);
    });
}
}

我认为我的问题出在 me() 方法上。

代码(app/app.html):

<div class="navbar-header">
  <a class="navbar-brand" href="#">
    User name: {{user.name}}
  </a>
</div>

我是 Angulare 2 和 typescript 的初学者，所以我仍然遇到问题。谢谢。

Answer 1

我认为 FB 对象是在 Angular2 的上下文之外创建的，因此回调中的处理不会触发更改检测。

您需要利用 NgZone 类在 Angular2 区域中执行您的代码:

constructor(private ngZone:NgZone) {
}

me() {
  FB.api('/me?fields=id,name,first_name,gender,picture.width(150).height(150),age_range,friends',
    (result: any) => {
      console.log(result);
      this.ngZone.run(() => { // <-----
        this.user = result;
      });
    });
}