Question

我已按照this链接配置了Facebook评论。它通常在angular2应用程序中正常工作。

我在angular2应用程序中配置了几个路由器。只有一个路由器配置为加载Facebook评论。当我第一次加载该路由器时，它工作正常;但如果我切换到其他路由器/链接并返回，它就不会显示出来。

下面是我的facebookCommentAPI代码，我修改后适合角度方式。

declare let FB : any;
@Component({
  selector: 'facebookComment',
  template: `
    <div id="{{fbCommentID}}">
      <div class="fb-comments" data-href="https://www.facebook.com/SenapatiJyotirmay/" data-width="900" data-numposts="3">
      </div>
    </div>
  `
})
export class FacebookCommentComponent {

  protected js;
  protected fjs;
  protected childNode;
  public fbCommentID : any;
  constructor(@Inject(DOCUMENT) private document: any, private _zone: NgZone, protected router : Router, public r : Renderer, public el : ElementRef) {

    this.fbCommentID = "fbCommentId";
    this.loadFBCommentAPI(this.document, 'script', 'facebook-jssdk');
  }

  loadFBCommentAPI = (d, s, id) => {
    this._zone.run(() => {
      this.js, this.fjs = d.getElementsByTagName(s)[0];

      if (typeof FB === 'object') {
        console.log("coming");
        FB.XFBML.parse(); 
        return;
      }
      this.js = d.createElement(s); 
      this.js.id = id;
      this.js.src = "https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.7&appId=1834265296843281";
      this.childNode = this.fjs.parentNode.insertBefore(this.js, this.fjs);
     });
  }

}

的index.html

<div id="fb-root"></div>

未添加facebook SDK脚本。当我们调用loadFBCommentAPI函数时，它会从组件异步加载。

控制台中没有错误，并且没有保存第一次加载时所执行的DOM元素。

我无法从angular组件运行FB.XFBML.parse（）。从浏览器开发人员控制台手动运行时，它可以正常工作。

FB.XFBML.parse函数在angular2组件中不起作用

0 个答案: