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) 
    ); 
    } 

}