Facebook评论Widget懒惰加载Angular 2

Question

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

说明：我想在单个博客文章的底部显示Facebook评论小部件，这是有效的，但是当我稍后回到博客文章或任何其他博客文章时，FB Widget不会加载/显示。我关注的指南是Facebook Developers Comment Widget

是）我有的：

从路由中提取：

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

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

<div [innerHtml]="post.html"></div>
<div id="fb-root"></div>
<div class="fb-comments" [attr.data-href]="currentURL" data-numposts="5"></div>

从post.component.ts（OLD）中提取：

...
export class PostComponent implements AfterViewInit{
  ...
  ngAfterViewInit(){
    this.initFBComments();
  }

  initFBComments(){
    (function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.8";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));        
  }
}

问题：正如我提到的那样有效，但只是第一次访问页面。当我返回第一次下载的FB-SDK已经存在并且没有执行任何内容（因为执行了if (d.getElementById(id)) return;）

---

我做的改变：我尝试了很多不同的东西，使用ngOnInit，ngAfterViewChecked甚至是一个在click事件上调用的函数。问题是没有加载，因为已经下载了SDK（因为延迟加载）。

如果我稍微更改代码以便动态添加html并从SDK运行一些代码我可以让它再次获取数据，但由于它已将小部件的高度设置为0并且仍未显示它也有widget fb_hide_iframes类。

文件现在如何：

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

<div [innerHtml]="post.html"></div>
<div #fbComments></div>

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

...
declare var window: any;
export class PostComponent implements AfterViewInit{
  @ViewChild('fbComments') elementRef: ElementRef;
  ...
  ngAfterViewInit(){
    this.initFBComments();
  }

  initFBComments(){
    //Add the html tags dynamically.
    this.renderer.setElementProperty(this.elementRef.nativeElement, 'innerHTML', '<div id="fb-root"></div><div class="fb-comments" data-href="'+this.currentURL+'" data-numposts="5"></div>');

    (function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)){
        window.FB.XFBML.parse(); //Instead of returning, lets call parse()
      }
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.8";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', '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>

Answer 1

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

因此，通过添加：

ngOnDestroy() {
  delete window.FB;
}

解决了一切。 Facebook的SDK现在可以在每次加载时执行所有操作，就像之前不存在一样

Answer 2

作为@Hendri回答的后续内容，我只想提及

delete window.FB;

我还必须删除'facebook-jssdk'元素，否则它不会重新加载。竞争代码：

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