Twitter eingebettet für Angular 2

Ich habe versucht, Twitter-Timeline in meine Angular 2 App einzubetten. Ich folgte diesem Tutorial https://publish.twitter.com dann hatte ich dieseTwitter eingebettet für Angular 2

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

ich einen Tag in Vorlage vorbringen, und Script-Tag in index.html. Dies ist ein Beispiel.

<!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="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css"> 
 
    <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="https://twitter.com/TwitterDev">Tweets by TwitterDev</a> 
 
     </div> 
 
    </my-app> 
 
    </body> 
 
</html>

Aber es zeigte nur das ein Tag, keine Timeline. Bitte helfen Sie mir!

Quelle

2016-09-12 Huy Ham Hố

Eigentlich tat es manchmal auftauchen. Ich lade die Seite mehrmals neu und es wird angezeigt, aber nicht immer. –

Sie sollten das twitter Widget-Skript ausführen, nachdem Ihre Vorlage geladen wurde.

ich dies tat:

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

Und meine Html-Datei enthält nur das:

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

Vielleicht ist das nicht die eleganteste Lösung, aber für mich gearbeitet.

Quelle

2016-11-13 09:43:32

Hey, diese Lösung funktioniert, aber kannst du bitte erklären, was die Funktion in ngAfterViewInit tut. –

@AsifKarimBherani Es grundsätzlich das Twittern Widget Skript asynchron in Ihr Dokument einfügen. Sie können mehr darüber hier lesen: https://dev.twitter.com/web/javascript/loading Ich hoffe, es wird Ihnen helfen zu verstehen, wie das funktioniert :) –

Wenn Sie auf this Website gehen, können Sie Ihre Twitter URL eingeben und es wird den Code für Sie generieren.

Es wird Ihnen zwei Zeilen Code zur Verfügung stellen. Die zweite Codezeile ist eine Skriptverknüpfung zu einer JavaScript-Datei, die von Twitter gehostet wird. Es bedeutet, dass wir es nicht in der Winkel Welt ausführen müssen: D

hier ein Beispiel:

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

Als Schrägstreifen script Tags aus seiner Sicht, müssen Sie finden ein Workaround. Eine Abhilfe ist diese Antwort here.

macht das Beispiel:

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

Quelle

2017-12-02 18:34:16 chris31389

Twitter eingebettet für Angular 2

Antwort

Verwandte Themen