javascript - Angular 2 上的 Twitter 小部件

Question

我创建了一个 Twitter 小部件，并试图将其放入我的 Angular 2 项目中，但 JS 文件不起作用。

如果我用 JS ( Here ) 插入它，它会工作，但是当我切换到另一个选项卡并返回时(我安装了 Angular Routing)，它会消失并显示 A 标签中的任何内容(因此，“Tweets by .. ”)。

HTML 代码(在 home 组件中):

<md-card-content>
  <a class="twitter-timeline" data-lang="en" data-height="350" data-theme="light" data-chrome="noborders nofooter noheader noscrollbar transparent" href="https://twitter.com/profile">Tweets by profile</a>
</md-card-content>

home.component.ts 中的脚本，代码由@Arg0n 提供(查看答案部分):

import { Component, OnInit } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  constructor(private _router : Router) { }

  public ngOnInit() {
    this._router.events.subscribe(val => {
      if (val instanceof NavigationEnd) {
        (<any>window).twttr = (function (d, s, id) {
            let js: any, 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: any) {
                t._e.push(f);
            };

            return t;
        }(document, "script", "twitter-wjs"));
        twttr.widgets.load();
      }
    })
  }

}

编辑:好吧，我做了一些研究，发现我必须使用 twttr.widgets.load(); 再次加载小部件，但这样做会引发错误。

我编辑了上面的代码，所以你可以看到我尝试了什么。上面的代码返回一个错误:

[ts] 找不到名称“twttr”

如果我追加(窗口)。对它，它给了我这个:

异常:未捕获( promise ):类型错误:无法读取未定义的属性“加载”

加载属性的文档在这里:https://dev.twitter.com/web/javascript/initialization

Answer 1

好吧，我找到了解决办法。当我们在 Angular 路由器之间切换时，小部件会卸载。这就是我们放置订阅者的原因，因此每次在选项卡之间切换时我们都会加载小部件。我们可以看到here如何加载用于延迟加载内容的小部件。页面准备就绪后，我们可以使用该函数来加载小部件。 View 销毁后不要忘记取消订阅!

代码:

import { Component, OnDestroy } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';

@Component({ ... })

export class HomeComponent implements OnDestroy {
  private twitter: any;

  constructor(private _router: Router) {
    this.initTwitterWidget();
  }

  initTwitterWidget() {
    this.twitter = this._router.events.subscribe(val => {
      if (val instanceof NavigationEnd) {
        (<any>window).twttr = (function (d, s, id) {
          let js: any, 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: any) {
              t._e.push(f);
          };

          return t;
        }(document, "script", "twitter-wjs"));

        if ((<any>window).twttr.ready())
          (<any>window).twttr.widgets.load();

      }
    });
  }

  ngOnDestroy() {
    this.twitter.unsubscribe();
  }
}