Mob*_* IT 6 node.js single-page-application typescript ecmascript-6 angular
我正在关注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();
}
但没有运气
您需要widgets.js在twitter-timeline元素渲染后加载脚本，因此如果您将脚本放在 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>
ngAfterViewInit () 一个生命周期钩子，在 Angular 完全初始化组件的视图后调用。
更新
之前由名为 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();
}
在任何情况下，脚本尚未加载，您都会收到一个错误，例如 twttr is not defined 下载widgets.js脚本并使用 import 将其包含到您的项目中
主文件
import './app/widgets.js'
下面是我的代码。我正在创建空白网站，所以我认为这应该不是问题。我认为可能是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>
你可以在这里查看我的代码