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下载的第一行是： {{1}}

通过添加：

{{1}}

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

Answer 2

作为@Hendri回答的后续措施，我只想提及

value

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

input

Facebook评论小工具懒惰加载Angular 2

2 个答案: