使用 Angular 2 延迟加载的 Facebook 评论小部件答案

【问题标题】：Facebook Comments Widget lazy loaded with Angular 2使用 Angular 2 延迟加载的 Facebook 评论小部件
【发布时间】：2017-01-01 16:59:04
【问题描述】：

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

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

我有什么：

从路由中提取：

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

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

<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 中提取（旧）：

...
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 甚至是在点击事件上调用的函数。问题是没有加载任何东西，因为已经下载了一个 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>

【问题讨论】：

this.renderer 指的是什么？在InitFBCommnets() 方法中？

标签： angular lazy-loading facebook-comments

【解决方案1】：

所以下载的 SDK 中的第一行是： try {window.FB|| ...

因此通过添加：

ngOnDestroy() {
  delete window.FB;
}

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

【讨论】：

所以旧代码已经足够好了，它只需要上面的 ngOnDestroy。不需要任何动态代码

【解决方案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');
}

【讨论】：