Внедрение временной шкалы в твиттере не отображается под углом 7 - PullRequest
Новая
       1

Внедрение временной шкалы в твиттере не отображается под углом 7

6 голосов
/ 13 июня 2019

Я следую https://help.twitter.com/en/using-twitter/embed-twitter-feed за встраивание временной шкалы в угловую страницу.Отображается только кнопка, но не фактическая временная шкала.

index.html выглядит так: 

<body style="margin:0">
    <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
    <app-root></app-root>
</body>

app.component.html выглядитниже: 

<a class="twitter-timeline"
   href="https://twitter.com/TwitterDev/lists/national-parks?ref_src=twsrc%5Etfw">
      A Twitter List by TwitterDev
</a>

Также пробовал такие вещи, как app.component.ts : 

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

Но не повезло

Ответы [ 2 ]

2 голосов
/ 24 июня 2019

вам нужно загрузить widgets.js скрипт после того, как элемент twitter-timeline отрендерен, поэтому если вы поместите скрипт в index.html, он будет загружен, а элемент еще не отрисован.

? лучший способ обойти это динамически создать тег сценария после рендеринга элемента.

твиттерный компонент 

export class TwitterComponent  {

  @Input() user:string;

  constructor(private renderer2: Renderer2,private el: ElementRef) {}

  ngAfterViewInit() {

    let scriptEl = document.createElement('script');
    scriptEl.src = "https://platform.twitter.com/widgets.js"

    this.renderer2.appendChild(this.el.nativeElement, scriptEl);

  }

}

шаблон 

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

шаблон компонента приложения 

<app-twitter [user]="name"></app-twitter>

угловые твиттеры ⚡⚡

ngAfterViewInit () ловушка жизненного цикла, которая вызывается после того, как Angular полностью инициализировал представление компонента.

Обновлено ??

простое упоминание в этом ответе ранее от пользователя по имени Бернардо Баумблатт

поставить ссылку на скрипт в index.html 

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

загрузка виджетов Twitter при вызове метода ngAfterViewInit 

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

в любом случае сценарий еще не загружен, но вы получите сообщение об ошибке типа ? twttr is not defined ?, поэтому скачайте сценарий widgets.js и включите его в свой проект с помощью импорта

main.ts 

import './app/widgets.js'

демо ??

1 голос
/ 24 июня 2019

Ниже мой код.Я создаю пустой сайт, поэтому думаю, что это не должно быть проблемой.То, что я думаю, может быть, порядок сценария в index.html 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Twitter</title>
    <base href="/" />

    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
  </head>
  <body>
    <app-root></app-root>
  </body>
  <script
    async
    src="https://platform.twitter.com/widgets.js"
    charset="utf-8"
  ></script>
</html>

В моем app.component.html 

<a class="twitter-timeline"
   href="https://twitter.com/TwitterDev/lists/national-parks?ref_src=twsrc%5Etfw">
      A Twitter List by TwitterDev
</a>

Вы можете просмотреть мой код здесь

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...