嵌入 twitter 时间线不会以角度 7 呈现答案

【问题标题】：Embedding twitter timeline does not render in angular 7嵌入 twitter 时间线不会以角度 7 呈现
【发布时间】：2021-10-05 22:29:10
【问题描述】：

我正在关注https://help.twitter.com/en/using-twitter/embed-twitter-feed 在角度页面中嵌入时间线。只有按钮呈现，而不是实际的时间线。

index.html 看起来像：

<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 如下所示：

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

还尝试了 app.component.ts 之类的东西：

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

但没有运气

【问题讨论】：

放在 index.html 里面就可以了？
是的，它确实可以放在 index.html 上
刚刚在 stackblitz 中尝试过，它似乎可以正常工作stackblitz.com/edit/angular-2mbweb
是的，你的代码可以在 stackblitz 中工作，但对我来说却不行。只有当我把它放在 index.html 上时它才有效。但不在 app.components.html
@MoblizeIT 你的浏览器控制台有错误吗？

标签： node.js angular typescript ecmascript-6 single-page-application

【解决方案1】：

您需要在渲染twitter-timeline 元素之后加载widgets.js 脚本，因此如果您将脚本放在 index.html 中，它将加载并且该元素尚未渲染。

? 最好的解决方法是在元素渲染后动态创建脚本标签。

推特组件

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

  }

}

模板

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

应用组件模板

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

angular twitter widgets ⚡⚡

ngAfterViewInit() 一个生命周期钩子，在 Angular 完全初始化组件视图后调用。

更新了??

用户 Bernardo Baumblatt 之前在 answer 中提到了一个简单的解决方案

把脚本链接放在index.html

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

在调用 ngAfterViewInit 方法时加载 twitter 小部件

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

在任何情况下，脚本尚未加载，您会收到类似? twttr is not defined ? 的错误，因此请下载 widgets.js 脚本并使用 import 将其包含到您的项目中

main.ts

import './app/widgets.js'

demo ??

【讨论】：

小部件导入的替代方案：(<any>window).twttr.widgets.load();

【解决方案2】：

我需要根据不同的 twitter 时间线动态呈现时间线。

我通过在构造函数中创建一个变量找到了一种解决方法，该变量存储了基于 twitter 用户名的 href。

例如，如果您的链接是“https://twitter.com/TwitterDev/lists/national-parks?ref_src=twsrc%5Etfw” ，您只需将其放入先前定义的全局变量中的构造函数中，例如“embedLink”

比如在你的 ts 组件中：


@Component({
  selector: 'app-tree-dashboard',
  templateUrl: './tree-dashboard.component.html',
  styleUrls: ['./tree-dashboard.component.css']
})
export class TreeDashboardComponent implements OnInit,AfterViewInit {
  embedLink='';

  constructor(private matIconRegistry: MatIconRegistry,
              ) {
this.embedLink=  "https://twitter.com/TwitterDev/lists/national-parksref_src=twsrc%5Etfw" 
}};

然后在你的 HTML 中：

<a class="twitter-timeline" href={{embedLink}}></a>

最后，您只需要在 index.html 中添加您已经完成的脚本。所以你很高兴！

【讨论】：

【解决方案3】：

下面是我的代码。我正在创建空白网站，所以我认为这应该不是问题。我认为可能是 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>

在我的 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>

您可以查看我的代码here

【讨论】：