Javascript Facebook评论加载与角度Fullstack不一致_Javascript_Angularjs_Facebook

Javascript Facebook评论加载与角度Fullstack不一致

javascript angularjs facebook

Javascript Facebook评论加载与角度Fullstack不一致,javascript,angularjs,facebook,Javascript,Angularjs,Facebook,我有FB评论和FB共享按钮在博客帖子页面上实现。当我第一次来到我的博客帖子页面时，FB的评论很少被加载。当我刷新页面时，会发生以下五种情况之一：1）页面加载时没有注释（大部分时间）；2）页面加载了注释；3）出现未定义FB；偶尔我会发现init没有用有效的版本调用。如果我快速刷新两次，有时页面根本不会刷新，只会返回一个空白页面。在搜索此解决方案时，我查看了与本讲座相关的几乎所有关于堆栈溢出的帖子，包括：我不知道TurboLink是什么，但我认为它与RoR有关，这是一个角度完整的堆栈项目。在

我有FB评论和FB共享按钮在博客帖子页面上实现。当我第一次来到我的博客帖子页面时，FB的评论很少被加载。当我刷新页面时，会发生以下五种情况之一：1）页面加载时没有注释（大部分时间）；2）页面加载了注释；3）出现未定义FB；偶尔我会发现init没有用有效的版本调用。如果我快速刷新两次，有时页面根本不会刷新，只会返回一个空白页面。在搜索此解决方案时，我查看了与本讲座相关的几乎所有关于堆栈溢出的帖子，包括：

我不知道TurboLink是什么，但我认为它与RoR有关，这是一个角度完整的堆栈项目。在my index.html中：

<body ng-app="theApp">   
    <div id="fb-root"></div>
    <script>

        window.fbAsyncInit = function() {
          FB.init({
            appId      : 'MyApp',
            xfbml      : true,
            version    : 'v2.5'
          });
        };

        (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 = "https://connect.facebook.net/en_US/sdk.js";
           fjs.parentNode.insertBefore(js, fjs);
         }(document, 'script', 'facebook-jssdk'));
    </script>

<body ng-app="theApp">   
    <div id="fb-root"></div>
    <script>

    window.fbAsyncInit = function() {
      FB.init({
        appId      : 'MyApp',
        xfbml      : false, //this was true before,
        version    : 'v2.5'
      });
    };

    (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 = "https://connect.facebook.net/en_US/sdk.js";
       fjs.parentNode.insertBefore(js, fjs);
     }(document, 'script', 'facebook-jssdk'));
</script>

此解决方案使我的FB share按钮无需刷新（我最新的一期），但在再次刷新之前，我的评论不会出现。

经过多次实验，我终于在第一页加载时得到了评论。有一个滞后的问题，如果我转到另一个页面（比如我们的社交媒体），然后快速点击backspace，它会说“FB未定义”。任何留下更好答案的人都可以获得额外积分。以下是我发现的第一次加载页面的代码：

My index.html：

<body ng-app="theApp">   
    <div id="fb-root"></div>
    <script>

        window.fbAsyncInit = function() {
          FB.init({
            appId      : 'MyApp',
            xfbml      : true,
            version    : 'v2.5'
          });
        };

        (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 = "https://connect.facebook.net/en_US/sdk.js";
           fjs.parentNode.insertBefore(js, fjs);
         }(document, 'script', 'facebook-jssdk'));
    </script>

<body ng-app="theApp">   
    <div id="fb-root"></div>
    <script>

    window.fbAsyncInit = function() {
      FB.init({
        appId      : 'MyApp',
        xfbml      : false, //this was true before,
        version    : 'v2.5'
      });
    };

    (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 = "https://connect.facebook.net/en_US/sdk.js";
       fjs.parentNode.insertBefore(js, fjs);
     }(document, 'script', 'facebook-jssdk'));
</script>

我很高兴它能“工作”，但考虑到comments.html和comments.controller.js中的FB.XFBML.parse（）的冗余，以及当你转到另一个页面进行fast后回击时页面会崩溃的事实，我发现自己并不满意。如果有人有更好的答案，我很乐意听到。

我用更简单的方法解决了这个问题。 My index.html

 <div id="fb-root"></div>
<script
  async
  defer
  crossorigin="anonymous"
  src="https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v9.0"
  nonce="XgepUhS8"
>

</script>

}

它将解决这个问题

angular.element(document).ready(function() {
      FB.XFBML.parse();
   });

 <div id="fb-root"></div>
<script
  async
  defer
  crossorigin="anonymous"
  src="https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v9.0"
  nonce="XgepUhS8"
>

</script>

  <div
class="fb-comments"
[attr.data-href]="url"
data-width="100%"
data-numposts="5"

declare var FB: any;
 ngOnInit(): void {
FB.XFBML.parse();