Question

我尝试将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>

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

＆＃13;

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

＆＃13;

但它只显示了一个标签，没有时间表。请帮帮我！

Answer 1

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

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

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

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

Answer 2

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

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

将Twitter参考放置在模板上

<a class="twitter-timeline" href="https://twitter.com/TwitterDev?ref_src=twsrc%5Etfw">Tweets by TwitterDev</a>

在AfterViewInit上加载twitter小部件

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

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

。

参考文献：
How do I render new Twitter widget dynamically?
Twitter Developer Documentation

最好的问候，
贝尔纳多·鲍姆布拉特。

Answer 3

我找到了一种相当简单的方法来实现这一点，它适用于Angular6。

Twitter提供以下代码。 See here

matched_nodes = html.findAll('strong', text=lambda n: x in n.lower()) for i, strong in enumerate(matched_nodes): print(i, matched_nodes)

它有两个标签<a class="twitter-timeline" href="https://twitter.com/TwitterDev/timelines/539487832448843776?ref_src=twsrc%5Etfw">National Park Tweets - Curated tweets by TwitterDev</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>和<a></a>。

您可以将<script></script>标签放置在角度应用程序<script></script>的{{1}}或<head></head>部分中，并且<body></body>可以放置在模板中（html）所需的角度分量。就像魅力一样。

Answer 4

如果你去this网站，你可以输入你的推特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带有script个标签，因此您需要找到一种解决方法。一个解决方法是这个答案here。

制作示例：

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

Answer 5

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

首先请确保在组件中导入AfterViewInit。

import { Component, OnInit, AfterViewInit } from '@angular/core';
在组件类中使用AfterViewInit。

export class OurNewsComponent implements OnInit, AfterViewInit
现在尝试一下，它将正常工作。

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

        }
      }

Answer 6

尝试以下操作：

index.html ：

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

app.component.html ：

<a class="twitter-timeline" data-theme="dark" data-link-color="#2B7BB9" href="https://twitter.com/TwitterDev?ref_src=twsrc%5Etfw">
   Tweets by TwitterDev
</a>

app.component.ts ：

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

最后一部分解决了一些返回到App组件（Angular 7）时的路由问题（时间轴未重新加载）。

Twitter嵌入Angular 2

6 个答案: