在组件中加载 facebook 页面的角度问题答案

【问题标题】：Angular problem with loading facebook page in component在组件中加载 facebook 页面的角度问题
【发布时间】：2019-12-17 13:16:39
【问题描述】：

我正在尝试在我的 Angular 8 应用程序的主页组件中加载 Facebook 插件。 https://developers.facebook.com/docs/plugins/page-plugin

第一次加载 home 组件一切正常，但是当我去另一条路线，然后回到家时，fb 的盒子是空的。

My fb box

内容不再出现

<div class="fb-page mx-auto border"
     data-href="https://www.facebook.com/tobagoaj/"
     data-tabs="timeline"
     data-width="500"
     data-height=""
     data-small-header="false"
     data-adapt-container-width="true"
     data-hide-cover="false"
     data-show-facepile="true">
  <blockquote cite="https://www.facebook.com/tobagoaj/" class="fb-xfbml-parse-ignore">
    <a href="https://www.facebook.com/tobagoaj/">Tobago - przyprawy i zioła</a>
  </blockquote>
</div>

有人有类似的问题，可以帮帮我吗？

【问题讨论】：

你找到解决办法了吗？

标签： angular facebook plugins

【解决方案1】：

解决办法是手动初始化FB页面插件。

这是为了防止在访问 window.FB 时出现任何 TS linting 错误

declare global {
    interface Window {
        FB: any;
    }
}

然后检查 window.FB 是否存在，尤其是在导航离开并使用 Angular 路由返回时是真的。

if (window.FB && window.FB.init) {
  window.FB.init({ status: true, xfbml: true, version: 'v5.0' });
} else {
  // original FB SDK script login goes here
}

【讨论】：

【解决方案2】：

我的一个组件中的 facebook 页面插件也遇到了同样的情况 - 这个解决方案对我有用：

import { Component, OnInit } from '@angular/core';

declare var FB: any;

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  constructor() {}

  ngOnInit() {
    if (FB != null && FB.XFBML != null)
      FB.XFBML.parse();
  }

}

【讨论】：