Embedding twitter timeline does not render in angular 7

问题

I am following https://help.twitter.com/en/using-twitter/embed-twitter-feed for embedding timeline in the angular page. Only button renders but not the actual timeline.

The index.html looks like:

<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 looks like below:

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

Also tried things like app.component.ts:

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

But no luck

回答1:

you need to load widgets.js script after twitter-timeline element is been render so if you place the script in index.html it is will load and the element hasn't render yet.

🌟 the best way around it is to create a script tag dynamically after the element is rendered.

twitter component

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

  }

}

template

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

app componenet template

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

angular twitter widgets ⚡⚡

ngAfterViewInit() a lifecycle hook that is called after Angular has fully initialized a component's view.

Updated 🔥🔥

a simple soulution mention in this answer before by user named Bernardo Baumblatt

put the script link in the index.html

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

load the twitter widgets when ngAfterViewInit method call

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

in any case the script has not loaded yet you will got an error like 🆘 twttr is not defined 👉 so download the widgets.js script and include it to your project by using import

main.ts

import './app/widgets.js'

demo 💥💥

回答2:

Below is my code. I'm creating blank website so I think it's should not be a problem. What I think is maybe the order of the script in 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>

In my 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>

You can view my code here

来源：https://stackoverflow.com/questions/56574072/embedding-twitter-timeline-does-not-render-in-angular-7

标签

node.js

angular

typescript

ecmascript-6

single-page-application