Твиттер-виджет на Angular 2

Я создал виджет Twitter и пытаюсь добавить его в свой проект Angular 2, но файл JS не работает.

Если я вставляю его с помощью JS ( здесь), он работает, но когда я переключаюсь на другую вкладку и обратно (у меня установлена ​​Angular Routing), он исчезает и показывает все, что есть в теге A (так, "Tweets by...").

HTML-код (он находится в домашнем компоненте):

<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] Cannot find name 'twttr'

если я добавлю (окно). к этому, это бросает меня это:

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

Документация по свойству load находится здесь: https://dev.twitter.com/web/javascript/initialization

Источник

2 ответа

Решение

Хорошо, я нашел решение для этого. Когда мы переключаемся между угловыми роутерами, виджет выгружается. Вот почему мы ставим подписчика, поэтому загружаем виджет каждый раз, когда переключаемся между вкладками. Здесь мы видим, как загрузить виджет для ленивого контента. Когда страница готова, мы можем использовать эту функцию для загрузки виджета. Не забудьте отписаться после того, как вид уничтожен!

Код:

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();
  }
}
Источник

Пример для моего комментария (соответствующие части):

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

@Component({ ... })
export class MyComponent 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"));
      }
    });
  }
}
Источник

Это будет работать для меня на angular 7.2.2 и ionic 4.1. angular может создавать, а ionic может создавать приложения и тестировать на кордове.

решение от: встроенный виджет Twitter в приложении Angular 2+ отображается только при загрузке первой страницы

import { Component, OnInit, OnDestroy, AfterViewInit, PLATFORM_ID, Inject } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';

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

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

вставьте сюда в.ts и поместите тег twitter в файлы шаблонов

Источник
Другие вопросы по тегам