javascript - Twitter 时间线嵌入不会在 Angular 中重新加载

Question

我试图让我的 Twitter 时间线嵌入在我从服务更改主题项目的事件后刷新。然后，这将更改模板中嵌入的 twitter 的 href。

第一个事件(选择 Twitter 个人资料的按钮)可以正确显示该特定主题项目的 Twitter 时间线。

但是，随后点击其他个人资料上的按钮不会触发新的 Twitter 时间线。它确实更改了模板 href，但不显示其 Twitter 时间线。

我正在使用这个https://stackoverflow.com/a/47178554/7106485为时间线创建 Twitter 窗口。

组件代码:

export class HighlightSocialComponent implements OnInit, OnDestroy {
  team1Social: TeamSocial = new TeamSocial();
  twitterUrl = 'https://twitter.com/lakers';
  private twitter: any;
  @ViewChild('t') twitterElement: ElementRef;

  constructor(private teamService: TeamsServices, @Inject(PLATFORM_ID) private platformId: Object) {}

  ngOnInit() {
    this.teamService.homeTeamSocialChanged.subscribe(
      (ts: TeamSocial) => {
        this.team1Social = ts;
        this.twitterUrl = this.getTwitterUrl(ts.twitter);
        // https://stackoverflow.com/questions/47176195/embedded-twitter-widget-on-angular-2-app-only-shows-up-on-the-first-page-load?noredirect=1&lq=1
        if (isPlatformBrowser(this.platformId)) {
          setTimeout(function() {
            (<any>window).twttr = (function(d, s, id) {
              let js, fjs = d.getElementsByTagName(s)[0],
                t = (<any>window).twttr || {};
              if (d.getElementById(id)) return t;
              js = d.createElement(s);
              js.id = id;
              js.src = 'https://platform.twitter.com/widgets.js';
              fjs.parentNode.insertBefore(js, fjs);
              t._e = [];
              t.ready = function(f) {
                t._e.push(f);
              };
              return t;
            }(document, 'script', 'twitter-wjs'));
            (<any>window).twttr.widgets.load(); }, 100);
        }
      });
  }

模板代码:

<a class="twitter-timeline" data-lang="en" data-height="400" data-theme="light" data-chrome="noborders nofooter noheader noscrollbar transparent"
   [href]="twitterUrl | safeUrl " #t></a>

Answer 1

尝试以下操作:

ngAfterViewInit(): void {
   (<any>window).twttr.widgets.load();
}

使用 Angular 7 对我来说就像一个魅力。