Twitter 时间线嵌入不会在 Angular 中重新加载答案

【问题标题】：Twitter timeline embed doesn't reload in AngularTwitter 时间线嵌入不会在 Angular 中重新加载
【发布时间】：2019-07-25 23:51:39
【问题描述】：

我试图让我的 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>

【问题讨论】：

标签： javascript angular typescript twitter

【解决方案1】：

尝试以下方法：

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

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

【讨论】：

【解决方案2】：

找到解决方案：

我使用了一个 ngIf 属性，该属性显式监听“配置文件”何时更改。当它被调用时，我切换（设置关闭/然后打开）该属性，以便 div 刷新并清除 twitter 窗口。然后新的推特时间线现在就可以加载了。

【讨论】：