facebook-graph-api - 如何从 Angular2 服务访问 FB global？

Question

我正在尝试使用通过新的 Angular CLI 创建的 Angular2 项目中的 FB SDK。我创建了以下服务来初始化 Facebook 库，添加了 fbsdk typings 并且编译了所有内容，但我无法从项目中的任何地方访问 FB 全局变量，但“winwow.fbAsyncInit”函数除外。我可以完美地从控制台检查 FB 对象，但无法从 NG2 代码访问它。 ¿知道问题出在哪里吗？

import { Injectable, OnInit } from '@angular/core'
import { FACEBOOK_APPID } from '../constants'

@Injectable()
export class fbService implements OnInit{
  constructor(){}
  ngOnInit(){
    if (!window.fbAsyncInit) {
        window.fbAsyncInit = function () {
            FB.init({
                appId: FACEBOOK_APPID,
                xfbml: false,
                version: 'v2.6'
            });
            FB.api("/me",null,()=>{})
            console.log(FB)
        };
    }
    this.initFB()           
}
initFB(){
  var js, id = 'facebook-jssdk', ref = document.getElementsByTagName('script')[0];
    if (document.getElementById(id)) {
        return;
    }
    js = document.createElement('script');
    js.id = id;
    js.async = true;
    js.src = "//connect.facebook.net/en_US/sdk.js";
    ref.parentNode.insertBefore(js, ref);
}
getPost(page:string){
     FB.api(`/${page}/feed?limit=1`,null,(response)=>{console.log(response)})
}
}

Answer 1

关键在于调用 this.zone.run(callback) 以包装回调并将其重新插入 Angular 2 生命周期。

我在服务构造函数中初始化 SDK，与立即加载相比，这可能会引入一些延迟。尚未找到解决方法。

我还没有决定是否要提供一个访问器到 FB 一旦初始化或包装器方法，我会把它留给你。

@Injectable()
export class FbsdkService {
    public ready = new BehaviorSubject<boolean>(false);

    constructor(
        private zone: NgZone) {
        this.loadSdkAsync(() => {
            FB.init({
                appId: "XXXXXXXXXXX",
                status: false,
                xfbml: false,
                version: "v2.7"
            });
            this.ready.next(true);
        });
    }

    loadSdkAsync(callback: () => void) {
        window.fbAsyncInit = () => this.zone.run(callback);
        // Load the Facebook SDK asynchronously
        const s = "script";
        const id = "facebook-jssdk";
        var js, fjs = document.getElementsByTagName(s)[0];
        if (document.getElementById(id)) return;
        js = document.createElement(s); js.id = id;
        js.src = "//connect.facebook.net/en_US/sdk.js";
        fjs.parentNode.insertBefore(js, fjs)
    }
}