我尝试将 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。这是一个例子。
<!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>但它只显示了 a 标签，没有时间线。 请帮助我!
最佳答案
您应该在加载模板后运行 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>
也许这不是最优雅的解决方案，但对我有用。
关于为 Angular 2 嵌入的 Twitter，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39455813/