FacebookComments小部件延迟加载Angular 2

简言之：Facebook评论小部件仅在第一次访问页面时加载，之后不再加载。我需要一种方法，让脚本和其他任何东西再次执行，就像第一次访问页面时执行一样

解释：我想在一篇博客文章的底部显示Facebook评论小部件，这是可行的，但当我稍后回到博客文章或任何其他博客文章时，FB小部件不会加载/显示。我遵循的指南是

我所拥有的：

从路由中提取：

const routes: Routes = [
  {
    path: '',
    component: BlogComponent,
    children: [
      {
        path: ':slug',
        pathMatch: 'full',
        loadChildren: () => PostModule
      },
      {
        path: '',
        loadChildren: () => PostsModule
      }
    ]
  }
];

从post.component.html（旧）中提取：

问题：正如我提到的，这是可行的，但只有在第一次访问页面时才有效。当我返回第一次下载的FB-SDK时，它已经存在并且没有执行任何操作（因为

if（d.getElementById（id））返回；

已执行）

---

我所做的更改：我尝试了很多不同的方法，包括使用ngOnInit、NgoAfterView甚至在单击事件中调用函数。问题是没有加载任何内容，因为已经下载了SDK（因为延迟加载）

如果我稍微更改代码，以便动态添加html并从SDK运行一些代码，我可以让它再次获取数据，但它仍然不会显示，因为它已将小部件的高度设置为

0

，并且它还有

小部件fb\u hide\u iframes

类

文件现在的状态：

从post.component.html中提取（新）：

摘自post.component.ts（新）：

。。。
声明变量窗口：任意；
导出类PostComponent实现AfterViewInit{
@ViewChild（'fbComments'）elementRef:elementRef；
...
ngAfterViewInit（）{
this.initFBComments（）；
}
initFBComments（）{
//动态添加html标记。
this.renderer.setElementProperty（this.elementRef.nativeElement，'innerHTML'，''；
（功能（d、s、id）{
var js，fjs=d.getElementsByTagName[0]；
if（d.getElementById（id））{
window.FB.XFBML.parse（）；//让我们调用parse（）而不是返回
}
js=d.createElement；js.id=id；
js.src=“//connect.facebook.net/en_GB/sdk.js#xfml=1&version=v2.8”；
fjs.parentNode.insertBefore（js，fjs）；
}（文档“脚本”、“facebook jssdk”）；
}
}

结果：

第一次访问页面时：

<div _ngcontent-bbg-8="" id="fb-root" class=" fb_reset">
  <div style="position: absolute; top: -10000px; height: 0px; width: 0px;">...</div>
  <div style="position: absolute; top: -10000px; height: 0px; width: 0px;">...<div>
</div>
<div _ngcontent-bbg-8="">
  <div class="fb-comments fb_iframe_widget" data-href="localhost/blog/testing" data-numposts="5" fb-xfbml-state="rendered">
    <span style="height: 944px; width: 550px;"><iframe ...></iframe></span>
  </div>
</div>

...
...

第二次访问页面时：

<div _ngcontent-bbg-8="" id="fb-root"></div>
<div _ngcontent-bbg-8="">
  <div class="fb-comments fb_iframe_widget_loader fb_iframe_widget fb_hide_iframes" data-href="localhost/blog/testing" data-numposts="5" fb-xfbml-state="rendered">
    <span style="height: 100px; width: 550px;"><iframe ...</iframe></span>
  </div>
</div>

因此，SDK中下载的第一行是：
试试{window.FB | |……

因此，加入：

ngOnDestroy() {
  delete window.FB;
}

解决了所有问题。Facebook的SDK现在在每次加载时都会执行所有内容，就好像它以前不存在一样。
作为@Hendri回答的后续，我只想补充一点

delete window.FB;

我还必须删除“FacebookJSSDK”元素，否则它将无法重新加载。因此，代码：

ngOnDestroy() {
  (function (d, s, id) {
    let js, fjs = d.getElementsByTagName(s)[0];
    let jssdk = d.getElementById(id);
    if (jssdk)
      fjs.parentNode.removeChild(jssdk);
    delete window.FB;
  })(document, 'script', 'facebook-jssdk');
}

所以旧代码很好，它只需要如上所述的Ngondestory。不需要任何动态代码。在
initfbcomnets（）
方法中，渲染器是指什么？
<div _ngcontent-bbg-8="" id="fb-root"></div>
<div _ngcontent-bbg-8="">
  <div class="fb-comments fb_iframe_widget_loader fb_iframe_widget fb_hide_iframes" data-href="localhost/blog/testing" data-numposts="5" fb-xfbml-state="rendered">
    <span style="height: 100px; width: 550px;"><iframe ...</iframe></span>
  </div>
</div>

ngOnDestroy() {
  delete window.FB;
}

delete window.FB;

ngOnDestroy() {
  (function (d, s, id) {
    let js, fjs = d.getElementsByTagName(s)[0];
    let jssdk = d.getElementById(id);
    if (jssdk)
      fjs.parentNode.removeChild(jssdk);
    delete window.FB;
  })(document, 'script', 'facebook-jssdk');
}