Question

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

对于第一个加载home组件，一切正常，但是当我转到另一条路线，然后回到home时，fb框为空。

内容不再出现

<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>

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

Answer 1

解决方案是手动初始化FB页面插件。

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

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
}

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

}

在组件中加载Facebook页面的角度问题

2 个答案: