Twitter嵌入Angular 2

Huy*_* Hố 15 twitter angular

我试图将Twitter时间线嵌入我的Angular 2应用程序.我按照本教程https://publish.twitter.com 然后我有了这个

<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>
Run Code Online (Sandbox Code Playgroud)

我将标记放入模板并将脚本标记放入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="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>
Run Code Online (Sandbox Code Playgroud)

但它只显示了一个标签,没有时间表.请帮我 !

小智 15

您应该在加载模板后运行twitter小部件脚本.

我这样做了:

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");
    }
}
Run Code Online (Sandbox Code Playgroud)

我的.html文件只包含这个:

<a class="twitter-timeline" href="https://twitter.com/TwitterDev">Tweets by TwitterDev</a>
Run Code Online (Sandbox Code Playgroud)

也许这不是最优雅的解决方案,但对我有用.


Ber*_*att 11

index.html文件上加载Twitter的窗口小部件库。

<head>
    ....
    <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</head>     
Run Code Online (Sandbox Code Playgroud)

将twitter参考放在您的模板上

<a class="twitter-timeline" href="https://twitter.com/TwitterDev?ref_src=twsrc%5Etfw">Tweets by TwitterDev</a>
Run Code Online (Sandbox Code Playgroud)

加载Twitter微件 AfterViewInit

ngAfterViewInit(): void {
    // @ts-ignore
    twttr.widgets.load();
}
Run Code Online (Sandbox Code Playgroud)

我知道这是一个老问题,也许在那里就可以找到答案,但这是Google送给我的第一名。

参考:
如何动态呈现新的Twitter小部件?
Twitter开发人员文档

最好的问候,
Bernardo Baumblatt。