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

我正在尝试使用FBSDK，它来自使用新AngularCLI创建的Angular2项目。我创建了以下服务来初始化Facebook库，添加了fbsdk类型和所有编译内容，但除了“winwow.fbAsyninit”函数外，我无法从项目中的任何位置访问FB全局变量。我可以从控制台完美地检查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)})
}
}

---

键位于对

this.zone.run（callback）

的调用中，以包装回调并将其重新插入Angular 2生命周期

我在服务构造函数中初始化SDK，与立即加载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)
    }
}

@Injectable（）
导出类FbsdkService{
public ready=新行为主体（false）；
建造师(
私人专区:NgZone){
此.loadSdkAsync（（）=>{
FB.init({
appId:“xxxxxxxxxx”，
状态：false，
xfbml:false，
版本：“v2.7”
});
这个。准备好了。下一个（对）；
});
}
loadSdkAsync（回调：（）=>void）{
window.fbasyninit=（）=>this.zone.run（回调）；
//异步加载Facebook SDK
const s=“脚本”；
const id=“facebook jssdk”；
var js，fjs=document.getElementsByTagName[0]；
if（document.getElementById（id））返回；
js=document.createElement；js.id=id；
js.src=“//connect.facebook.net/en_US/sdk.js”；
fjs.parentNode.insertBefore（js，fjs）
}
}

我也有类似的问题，这个来源对我帮助很大-

从'@angular/core'导入{Injectable，NgZone}；
从“rxjs/Rx”导入{BehaviorSubject}；
从'@angular/Http'导入{Http}；
声明var FB：任何；
@可注射（）
导出类FbsdkService{
public ready=新行为主体（false）；
公共端点基http://graph.facebook.com';
构造函数（专用区域：NgZone，专用http:http）{
}
公共加载SDK（）{
this.loadAsync（（）=>{}）；
}
公共loadAsync（回调：（）=>void）{
window.fbasyninit=（）=>this.zone.run（回调）；
const s=“脚本”；
const id=“facebook jssdk”；
var js:any，fjs=document.getElementsByTagName[0]；
if（document.getElementById（id））返回；
js=document.createElement；
js.id=id；
js.src=“//connect.facebook.net/en_US/sdk.js”；
fjs.parentNode.insertBefore（js，fjs）；
}
公共getLoginStatus（）{
FB.getLoginStatus（（响应：any）=>{console.log（响应）；}）；
}
公共getProfile（）{
返回新承诺（（解决、拒绝）=>{
设字段=[
“身份证”、“姓名”、“电子邮件”、“封面”、“生日”
];
api（`/me？fields=${fields.toString（）}`，（响应：any）=>{
决心（回应）；
});
});
}
}

静态地在html中添加

脚本
元素怎么样。经过一些测试，它看起来与ng2的生命周期有关。如果我在fbService的构造函数上设置了init函数，那么一旦加载了所有dom，我就可以从任何按钮单击事件访问FB全局。如果我试图从组件访问它，OnInit事件FB尚未定义。
import { Injectable, NgZone } from '@angular/core';
import { BehaviorSubject } from "rxjs/Rx";
import { Http } from '@angular/http';

declare var FB: any;

@Injectable()
export class FbsdkService {
    public ready = new BehaviorSubject<boolean>(false);
    public endpointBase = 'http://graph.facebook.com';
    constructor(private zone: NgZone, private http: Http) {
    }

    public loadSdk() {
        this.loadAsync(() => { });
    }

    public loadAsync(callback: () => void) {
        window.fbAsyncInit = () => this.zone.run(callback);

        const s = "script";
        const id = "facebook-jssdk";
        var js: any, 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);
    }

    public getLoginStatus() {
        FB.getLoginStatus((response: any) => { console.log(response); });
    }

    public getProfile() {
        return new Promise((resolve, reject) => {
            let fields = [
                "id", "name", "email", "cover", "birthday"
            ];
            FB.api(`/me?fields=${fields.toString()}`, (response: any) => {
                resolve(response);
            });
        });
    }

}