Question

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

第一个事件（选择推特个人资料的按钮）正确显示该特定主题项目的推特时间线。

但是，其他配置文件上的后续按钮点击不会触发新的Twitter时间轴。它确实更改了模板href，但它没有显示其twitter时间轴。

我正在使用此https://stackoverflow.com/a/47178554/7106485为时间线创建推特窗口。

组件代码：

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

找到解决方案：

我使用了一个带有属性的ngIf，该属性明确地监听“配置文件”何时发生了变化。当它被调用时，我切换（设置然后再打开）该属性，以便div刷新并清除twitter窗口。然后新的Twitter时间线现在可以加载。

Answer 2

尝试以下操作：

ngOnInit() {
   (<any>window).twttr.widgets.load();
}

在这里找到解决方案https://stackoverflow.com/a/51740223/9753985

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

Twitter时间轴嵌入不会在Angular中重新加载

2 个答案: