Angular 2上的Twitter小部件 [英] Twitter widget on Angular 2

问题描述

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

I created a Twitter widget and I'm trying to put it in my Angular 2 project, but the JS file does not work.

如果我使用JS(这里)可以正常工作，但是当我切换到另一个选项卡并返回(我安装了Angular Routing)时，它消失了，并显示了A标记中的内容(因此，"Tweets by ..." ).

If I insert it with JS (Here) it works, but when I switch to another tab and back (I have Angular Routing installed) it disappears and shows whatever is in A tag (so, "Tweets by ...").

HTML代码(在家庭组件中):

HTML code (it's in home component):

<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提供(请看答案部分):

Script in home.component.ts, the code was provided by @Arg0n (look in answers section):

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();加载小部件，但是这样做会引发错误.

Alright, I did some research and found out that I have to load the widget again with twttr.widgets.load(); but doing that, it throws me an error.

我已经编辑了上面的代码，因此您可以看到我尝试过的内容.上面的代码返回错误:

I edited the code above, so you can see what I've tried. The code above returns an error:

[ts] Cannot find name 'twttr'

如果我追加(窗口).对此，它引发了我这个问题:

if I append (window). to it, it throws me this:

EXCEPTION: Uncaught (in promise): TypeError: Cannot read property 'load' of undefined

有关负载属性的文档位于此处: https://dev.twitter.com/web/javascript/initialization

The documentation on load property is here: https://dev.twitter.com/web/javascript/initialization

推荐答案

好的，我找到了解决方案.当我们在Angular路由器之间切换时，小部件将卸载.这就是我们放置订户的原因，因此，每次在选项卡之间切换时，我们都会加载小部件.我们可以在此处> 如何加载用于延迟加载内容的小部件.页面准备好后，我们可以使用该功能加载小部件.视图毁坏后，别忘了退订！

Alright, I found a solution to this. When we switch between Angular routers, the widget unloads. That's why we put a subscriber, so we load the widget every time we switch between tabs. We can see here how to load the widget for lazy-loading content. When the page is ready, we can use that function to load the widget. Don't forget to unsubscribe after the view is destroyed!

代码:

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();
  }
}

这篇关于Angular 2上的Twitter小部件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！