Angular не отображает сообщение в Facebook с помощью кнопки браузера назад / вперед

Question

Я занимаюсь разработкой страницы профиля с сообщениями в Facebook. Но мои сообщения не будут отображаться, когда я go и вернусь на страницу с помощью кнопки браузера назад / вперед.

• Angular CLI: 8.0.1
• Узел: 12.14 .1
• ОС: linux x64
• Angular: 8.0.0

profile.component.ts

import { Component, OnInit, OnDestroy, AfterViewInit, AfterContentInit, Renderer2, ElementRef, ViewChild } from '@angular/core';
import { Router, ActivatedRoute, Params } from '@angular/router';
import { ServerClientService } from '../../shared/serverclient.service';
import { AuthService } from '../../shared/auth.service';
import { FacebookService, InitParams } from 'ngx-facebook';


import { Account } from '../../shared/models/account.model';

declare const $: any;
declare var window: any;
declare var FB: any;

@Component({
  selector: 'app-profile',
  templateUrl: './profile.component.html'
})
export class ProfileComponent implements OnInit, AfterContentInit {

  myAccount: Account;
  twitterStatus: Object;
  facebookAct: Object;
  instagramAct: Object;
  youtubeAct: Object;
  accountId: string;
  isMyself: boolean = false;
  profession: string = '';
  accountCategoryLabel: string = '';

  serverErrorCode: string = '';

  @ViewChild('facebook', { static: false }) facebookDiv: ElementRef;


  constructor(private serverClient: ServerClientService,
    private authService: AuthService,
    private router: Router,
    private route: ActivatedRoute,
    private renderer2: Renderer2,
    private el: ElementRef,
    private fb: FacebookService) {


    let initParams: InitParams = {
      xfbml: true,
      version: 'v6.0'//v2.8
    };

    fb.init(initParams);
  }


  ngOnInit() {

    this.serverClient.searchFacebookPosts(this.accountId)
      .subscribe(
        facebookAct => {
          if (facebookAct && facebookAct.posts) {

            facebookAct.posts = facebookAct.posts.map(s => {
              let ids = s.id.split("_")
              s.link = 'https://www.facebook.com/' + ids[0] + '/posts/' + ids[1]
              return s;
            });
            this.facebookAct = facebookAct;
            window.FB.XFBML.parse(this.facebookDiv.nativeElement);
            console.log("window.FB.XFBML.parse(this.facebookDiv); called.")
          }
        },
        error => {
          this.serverErrorCode = error.error.code;
        });

  }

}

profile.component. html на странице моего профиля есть следующий код.

<div class="tab-pane" id="facebook">
 <app-ifm-fb-post [fbPosts]="facebookAct?.posts"></app-ifm-fb-post>
</div>

директива app-ifm-fb-post приведена ниже.

<div class="row">
  <div *ngFor="let fbPost of fbPosts">
    <fb-post width=" auto" [href]="fbPost.link"></fb-post>
  </div>
</div>

Когда я запускаю приложение, я вижу коды html. fb-post будет создан с правильными ссылками и получит сообщение, отправив https://www.facebook.com/v6.0/plugins/post.php?app_id=&chann(Trimed) и показывая сообщения только в первый раз, когда загружается браузер. но когда я go и возвращаюсь на страницу профиля, я вижу fb-post s в html, но https://www.facebook.com/v6.0/plugins/post.php?app_id=&chann(Trimed) вызываться не будет, и ничего не будет отображаться.

в браузере

<div class="row">
<div class="ng-star-inserted">
    <fb-post width=" auto" class="fb-post" data-href="https://www.facebook.com/10217956357636594/posts/10218504599782305" data-width=" auto" ng-reflect-href="https://www.facebook.com/10217" ng-reflect-width=" auto">
    </fb-post>
</div>
<div class="ng-star-inserted">
    <fb-post width=" auto" class="fb-post" data-href="https://www.facebook.com/10217956357636594/posts/10218501014532676" data-width=" auto" ng-reflect-href="https://www.facebook.com/10217" ng-reflect-width=" auto">
    </fb-post>
</div>
</div>

Может ли кто-нибудь мне помочь!?!?

Answer 1

Я решил сам.

для тех, у кого такая же проблема, как у меня.

Я использовал facebook javascript sdk вместо ngx-facebook, как показано ниже.

index. html

<script
    async
    defer
    crossorigin="anonymous"
    src="https://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v6.0"
></script>

facebook-sample.ts

declare var window: any;
declare var FB: any;

  ngAfterViewChecked() {
    if (this.needToRenderFB) {
      window.FB.XFBML.parse(this.facebookDiv.nativeElement);
      this.needToRenderFB = false;
    }
  }

facebook-sample. html

<div id="facebook" #facebook>
    <div class="row">
        <div
            class="col-md-3"
            *ngFor="
                let fbPost of facebookAct?.posts
            "
        >
            <div
                class="fb-post"
                data-width="auto"
                [attr.data-href]="fbPost.link"
                data-show-text="true"
            ></div>
        </div>
    </div>
</div>