嵌入Twitter时间轴不以7号角呈现 [英] Embedding twitter timeline does not render in angular 7
本文介绍了嵌入Twitter时间轴不以7号角呈现的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在关注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();
}
但运气不佳
推荐答案
您需要在twitter-timeline元素呈现之后加载widgets.js脚本，因此如果您将脚本放在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>
ngAfterViewInit()在角度已完全初始化组件的视图之后调用的生命周期挂钩。
已更新🔥🔥
名为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'
这篇关于嵌入Twitter时间轴不以7号角呈现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
