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

Question

我正在尝试在 angular2 应用程序上使用 Facebook Go Live Dialog 实现 Facebook live。 我有 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： Angular-cli 说 Webpack 现在有效

但几秒钟后出现： [默认] 提供的参数与调用目标的任何签名都不匹配。

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

Answer 1

1. 使用 ES6 arrow function => 否则你将无法在函数中使用 this。

2. ng2-facebook-sdk returns 和 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)
    );
  }

}