为Angular 2嵌入Twitter_Twitter_Angular

为Angular 2嵌入Twitter

twitter angular

为Angular 2嵌入Twitter,twitter,angular,Twitter,Angular,我试图将Twitter时间线嵌入我的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> 我将

我试图将Twitter时间线嵌入我的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>

我将一个标记放入模板，并将脚本标记放入index.html。这是一个例子


Angular 2应用程序| ng2网页包
加载

您应该在加载模板后运行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");
    }
}

而my.html文件仅包含以下内容：

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

也许这不是最优雅的解决方案，但对我来说很有效。

如果你去网站，你可以输入你的twitter URL，它会为你生成代码

它将为您提供两行代码。第二行代码是指向twitter托管的javascript文件的脚本链接。这意味着我们不需要在有角度的世界中执行它：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 6

Twitter提供了以下代码

它有两个标签

和

您可以将

标记放置在angular app的

index.html中的

或

部分，并且

可以放置在所需角度组件的模板（html）中。它工作起来很有魅力。

将Twitter的widgets库加载到

index.html

文件中

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

在

AfterViewInit

ngAfterViewInit(): void {
    twttr.widgets.load();
}

我知道这是一个老问题，也许有这个答案，但这是谷歌发给我的第一个地方

参考文献：

您应该在每次路由时重新运行twitter小部件js文件：

首先确保在组件中导入AfterViewInit

从'@angular/core'导入{Component，OnInit，AfterViewInit}


在组件类中使用AfterViewInit
导出类我们的NewsComponent实现OnInit，AfterViewInit

ngAfterViewInit(): void {
    twttr.widgets.load();
}

现在试试这个，它会很好用的
事实上，它有时确实会出现。我多次重新加载页面，它会显示出来，但并不总是如此。嘿，这个解决方案可行，但您能否解释一下ngAfterViewInit中的函数在做什么。@AsifKarimBherani它基本上是以异步方式将twitter小部件脚本插入到您的文档中。你可以在这里读到更多关于它的内容：我希望它能帮助你理解它是如何工作的：）Hi@ÁbóSzilágyi使用js代码现在会出现一个错误：错误TS1345:void类型的表达式无法测试真实性这真的很有帮助。我在一次又一次地路由到包含twitter嵌入代码的组件中。当我使用路由返回时，小部件没有重新加载。使用twttr.widgets.load（）添加后成功了！我在这里提到了你的回答好的解决方案！如果您添加声明var twttr:any
在调用脚本的组件的@Component（{}）
装饰器上方，您可以避免linting错误，并且不需要/@ts忽略。您好@springerkc，感谢您的分享，我根据您的建议编辑了我的答案。
declare var twttr: any;

ngAfterViewInit(): void {
    twttr.widgets.load();
}

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

        }
      }