Question

我正在关注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();
}

但是没有运气

Answer 1

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

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

twitter组件

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完全初始化组件的视图之后调用。

已更新??

answer中的一个简单的解决方案，之前是名为Bernardo Baumblatt的用户

将脚本链接放入index.html

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

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

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

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

main.ts

import './app/widgets.js'

demo ??

Answer 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中即可。所以你很好走！

Answer 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

嵌入Twitter时间轴不会以角度7

3 个答案: