Twitter для Angular 2

Я попытался включить таймлайн Twitter в мое приложение Angular 2. Я выполнил этот учебник https://publish.twitter.com то у меня было это

<a class="twitter-timeline" href="#" onclick="location.href='https://twitter.com/TwitterDev'; return false;">Tweets by TwitterDev</a> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

Я поместил тэг в шаблон и поместил тэг script в index.html. Это пример.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Angular 2 App | ng2-webpack</title>
    <link rel="icon" type="image/x-icon" href="/img/favicon.ico">
    <link rel="stylesheet" href="#" onclick="location.href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'; return false;">
    <link rel="stylesheet" href="#" onclick="location.href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css'; return false;">
    <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
    <base href="/">
  </head>
  <body>
    <my-app>
      <div class="loading-container">
        <div class="loading"></div>
        <div id="loading-text">loading</div>
        <a class="twitter-timeline" href="#" onclick="location.href='https://twitter.com/TwitterDev'; return false;">Tweets by TwitterDev</a>
      </div>
    </my-app>
  </body>
</html>

Ответ 1

Вы должны запустить виджет твиттера script после того, как ваш шаблон был загружен.

Я сделал это:

export class SectionSocialComponent implements AfterViewInit { 
    constructor() {}

    ngAfterViewInit () {
            !function(d,s,id){
                var js: any,
                    fjs=d.getElementsByTagName(s)[0],
                    p='https';
                if(!d.getElementById(id)){
                    js=d.createElement(s);
                    js.id=id;
                    js.src=p+"://platform.twitter.com/widgets.js";
                    fjs.parentNode.insertBefore(js,fjs);
                }
            }
            (document,"script","twitter-wjs");
    }
}

И мой .html файл содержит только это:

<a class="twitter-timeline" href="https://twitter.com/TwitterDev">Tweets by TwitterDev</a>

Возможно, это не самое элегантное решение, но работало для меня.

Ответ 2

Загрузите библиотеку виджетов Twitter в файл index.html.

<head>
    ....
    <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</head>

Помещает ссылку твиттера на ваш шаблон

<a class="twitter-timeline" href="https://twitter.com/TwitterDev?ref_src=twsrc%5Etfw">Tweets by TwitterDev</a>

Загрузите твиттер-виджеты в AfterViewInit

ngAfterViewInit(): void {
    // @ts-ignore
    twttr.widgets.load();
}

Я знаю, что это старый вопрос, и, возможно, там есть ответ, но это первое место, которое Google отправляет мне.

С наилучшими пожеланиями,
Бернардо Баумблат.

Ответ 3

Я нашел довольно простой способ достижения этого, он работает для Angular 6.

Twitter предоставляет следующий код. Посмотреть здесь

<a class="twitter-timeline" href="https://twitter.com/TwitterDev/timelines/539487832448843776?ref_src=twsrc%5Etfw">National Park Tweets - Curated tweets by TwitterDev</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

У него есть два <a></a> и <script></script>.

Вы можете поместить <script></script> в раздел <head></head> или <body></body> в index.html вашего углового приложения, и можно разместить <a></a> в шаблоне (HTML) вашего желаемого углового компонента. Это работает как шарм.

Ответ 4

Если вы перейдете на этот веб-сайт, вы можете ввести свой URL-адрес Twitter и он будет генерировать код для вас.

Он предоставит вам две строки кода. Вторая строка кода - это script ссылка на файл javascript, который размещает твиттер. Это означает, что нам не нужно выполнять его в мире angular: D

вот пример:

<a class="twitter-timeline" href="https://twitter.com/TwitterDev?ref_src=twsrc%5Etfw">Tweets by TwitterDev</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Как angular strips script теги из своего представления, вам нужно будет найти обходной путь. Одним из способов решения этой проблемы является здесь.

введя пример:

<a class="twitter-timeline" href="https://twitter.com/TwitterDev?ref_src=twsrc%5Etfw">Tweets by TwitterDev</a>
<script-hack async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script-hack>

Ответ 5

Вы должны повторно запускать js файл твиттер-виджетов каждый раз при маршрутизации:

Во-первых, обязательно импортируйте AfterViewInit в ваш компонент.

import { Component, OnInit, AfterViewInit } from '@angular/core';
Используйте AfterViewInit в своем классе компонентов.

export class OurNewsComponent implements OnInit, AfterViewInit
Теперь попробуйте это будет работать нормально.

        ngAfterViewInit() {

        // Tweets
        let ngJs: any;
        const ngFjs = document.getElementsByTagName('script')[0];
        const ngP = 'https';

        if (!document.getElementById('twitter-wjs')) {
          ngJs = document.createElement('script');
          ngJs.id = 'twitter-wjs';
          ngJs.src = ngP + '://platform.twitter.com/widgets.js';
          ngFjs.parentNode.insertBefore(ngJs, ngFjs);

        }
      }

Ответ 6

Попробуйте следующее:

index.html:

<head>
   <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</head>

app.component.html:

<a class="twitter-timeline" data-theme="dark" data-link-color="#2B7BB9" href="#" onclick="location.href='https://twitter.com/TwitterDev?ref_src=twsrc%5Etfw'; return false;">
   Tweets by TwitterDev
</a>

app.component.ts:

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

В последней части были решены некоторые проблемы с маршрутизацией (временная шкала не перезагружалась) при возвращении к компоненту приложения (Angular 7).