Angular2和Facebook SDK FB.ui对话框在点击下一步后关闭

Question

我试图在angular2应用上使用Facebook Go Live Dialog来实现Facebook直播。 我有SDK工作，它使得API调用正常，但是当试图使用FB.ui时，对话框并不好，因为对话框的第一个屏幕出现并询问在哪里发布，但是当单击Next时，对话框消失，我对发生的事情没有反馈。 （点击下一步应该会显示第二步的另一个对话框）

任何提示要解决这个问题？

facebooklive.ts

import {Component, OnInit} from '@angular/core'; 
import {FacebookService, FacebookLoginResponse, FacebookInitParams, 
FacebookApiMethod} from 'ng2-facebook-sdk/dist'; 

@Component({ 
... 
template : '<button (click)="FBDialog()">Dialog</button>' 
providers: [...FacebookService] 
}) 
export class Facebook_live implements OnInit { 
constructor(private fb:FacebookService) { 
let fbParams:FacebookInitParams = { 
appId: 'xxxxx', 
xfbml: false, 
version: 'v2.8' 
}; 
this.fb.init(fbParams); 
} 

FBDialog() { 
this.fb.ui(
    { 
     display: 'popup', 
     method: 'live_broadcast', 
     phase: 'create', 
    }, function (response) { 
     console.log(response); 

     if (!response.id) { 
      console.log('dialog canceled'); 
      return; 
     } 
     console.log('stream url:' + response.secure_stream_url); 

     this.fb.ui(
      { 
       display: 'popup', 
       method: 'live_broadcast', 
       phase: 'publish', 
       broadcast_data: response, 
      }, 
      function (response) { 
       console.log("video status: \n" + response.status); 
      }); 
    }); 


} 

编辑1：角CLI说 的WebPack现在有效

但几秒钟后显示： [默认]提供的参数不匹配任何签名呼叫目标。

我检查了FB SDK的fb.ui，它只要求2个参数：FB.ui(params, function(response))，我给它们两个。

Answer 1

1. 使用ES6 arrow function =>否则你将无法使用this一个函数内部。

2. 的ng2-facebook-sdkreturns如果你读一个promise的README.md你会看到ui(params: FacebookUiParams): Promise。

3. 的fb.init在构造函数中不需要this

---

import {Component, OnInit} from '@angular/core'; 
import {FacebookService, FacebookLoginResponse, FacebookInitParams, 
    FacebookApiMethod} from 'ng2-facebook-sdk/dist'; 

@Component({ 
    ... 
    template : '<button (click)="FBDialog()">Dialog</button>' 
    providers: [...FacebookService] 
}) 
export class Facebook_live implements OnInit { 


    constructor(private fb:FacebookService) { 
    let fbParams:FacebookInitParams = { 
     appId: 'xxxxx', 
     xfbml: false, 
     version: 'v2.8' 
    }; 
    fb.init(fbParams); 
    } 

    FBDialog() { 
    this.fb.ui(
     { 
     display: 'popup', 
     method: 'live_broadcast', 
     phase: 'create', 
     }) 
     .then(
     (response) => { 
      if (!response.id) { 
      console.log('dialog canceled'); 
      return; 
      } 

      console.log('stream url:' + response.secure_stream_url); 

      this.fb.ui(
      { 
       display: 'popup', 
       method: 'live_broadcast', 
       phase: 'publish', 
       broadcast_data: response, 
      }).then(
      (response) => { 
      console.log("video status: \n" + response.status); 
      }, 
      (error: any) => console.error(error) 
     ); 


     }, 
     (error: any) => console.error(error) 
    ); 
    } 

}