Angular 不使用浏览器 back/forward 按钮呈现 facebook post

Question

我一直在开发显示 facebook posts 的个人资料页面。但是当我使用浏览器 back/forward 按钮返回页面时，我的 posts 不会被渲染。

Angular命令行界面：8.0.1
节点：12.14.1
OS: 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) 并仅在浏览器首次加载时显示 post 来获得 post。但是当我返回个人资料页面时，我可以在 html 中看到 fb-posts，但是 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>

Angular 不使用浏览器 back/forward 按钮呈现 facebook post

Angular does not render facebook post with browser back/forward button

rendering

facebook

xfbml

angular