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和打字稿的初学者，所以我还有问题。感谢。

Answer 1

您在组件顶部指定了window.user，但是您正在分配user变量。您在模板中使用的是哪一个并不是很清楚，但这看起来像是您问题的根源。

Answer 2

我认为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;
      });
    });
}

Angular 2更新箭头函数变量 - Facebook

2 个答案: