Facebook Комментарии Виджет загружен с помощью Angular 2

Question

Вкратце: Комментарии Facebook Виджет загружается при первом обращении к странице, после чего он больше не загружается. Мне нужен способ для сценария и что-то еще, чтобы он был выполнен снова, как будто он был выполнен при первом доступе страницы.

Объяснение: Я хочу, чтобы отобразить Facebook комментарий виджет в нижней части одного сообщения в блоге, это работает, но когда я вернусь позже в блоге или любом другом блоге по этому вопросу ФБ Виджет делает не загружать/показывать. Руководство, которое я Ниже 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 даже функция, вызванная событием клика. Проблема в том, что ничего не загружается, потому что уже загружен SDK (из-за ленивой загрузки).

Если я немного изменил код, чтобы html был добавлен динамически и запустил некоторый код из SDK, я могу заставить его снова извлечь данные, но все же он не отображается из-за того, что он установил высоту виджет до 0, а также он имеет класс widget fb_hide_iframes.

Как файлы теперь:

Выписка из post.component.html (NEW):

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

Выписка из post.component.TS (NEW):

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

Результаты:

Когда доступ к странице 1-й раз:

<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> 

Когда страница используется 2-й раз:

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

решаемые все. SDK от Google теперь выполняет все на каждой загрузке, как если бы он не существовал ранее