Angular 2 上的 Twitter 小部件 [英] Twitter widget on Angular 2
问题描述
我创建了一个 Twitter 小部件,并试图将它放入我的 Angular 2 项目中,但 JS 文件不起作用.
I created a Twitter widget and I'm trying to put it in my Angular 2 project, but the JS file does not work.
如果我用 JS 插入它 (Here) 它可以工作,但是当我切换到另一个选项卡并返回时(我安装了 Angular Routing)它会消失并显示 A 标签中的任何内容(因此,推文来自...").
If I insert it with JS (Here) it works, but when I switch to another tab and back (I have Angular Routing installed) it disappears and shows whatever is in A tag (so, "Tweets by ...").
HTML 代码(在 home 组件中):
HTML code (it's in home component):
<md-card-content>
<a class="twitter-timeline" data-lang="en" data-height="350" data-theme="light" data-chrome="noborders nofooter noheader noscrollbar transparent" href="https://twitter.com/profile">Tweets by profile</a>
</md-card-content>
home.component.ts 中的脚本,代码由@Arg0n 提供(查看答案部分):
Script in home.component.ts, the code was provided by @Arg0n (look in answers section):
import { Component, OnInit } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
constructor(private _router : Router) { }
public ngOnInit() {
this._router.events.subscribe(val => {
if (val instanceof NavigationEnd) {
(<any>window).twttr = (function (d, s, id) {
let js: any, fjs = d.getElementsByTagName(s)[0],
t = (<any>window).twttr || {};
if (d.getElementById(id)) return t;
js = d.createElement(s);
js.id = id;
js.src = "https://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js, fjs);
t._e = [];
t.ready = function (f: any) {
t._e.push(f);
};
return t;
}(document, "script", "twitter-wjs"));
twttr.widgets.load();
}
})
}
}
好吧,我做了一些研究,发现我必须用 twttr.widgets.load();
再次加载小部件,但这样做会引发错误.
Alright, I did some research and found out that I have to load the widget again with twttr.widgets.load();
but doing that, it throws me an error.
我编辑了上面的代码,所以你可以看到我尝试了什么.上面的代码返回一个错误:
I edited the code above, so you can see what I've tried. The code above returns an error:
[ts] 找不到名字 'twttr'
如果我附加(窗口).对它来说,它给了我这个:
if I append (window). to it, it throws me this:
例外:未捕获(承诺):类型错误:无法读取未定义的属性加载"
加载属性的文档在这里:https://dev.twitter.com/web/javascript/初始化
The documentation on load property is here: https://dev.twitter.com/web/javascript/initialization
推荐答案
好的,我找到了解决方案.当我们在 Angular 路由器之间切换时,小部件会卸载.这就是我们放置订阅者的原因,因此我们每次在选项卡之间切换时都会加载小部件.我们可以看到这里 如何为延迟加载内容加载小部件.当页面准备好时,我们可以使用该函数来加载小部件.视图销毁后别忘了退订!
Alright, I found a solution to this. When we switch between Angular routers, the widget unloads. That's why we put a subscriber, so we load the widget every time we switch between tabs. We can see here how to load the widget for lazy-loading content. When the page is ready, we can use that function to load the widget. Don't forget to unsubscribe after the view is destroyed!
代码:
import { Component, OnDestroy } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
@Component({ ... })
export class HomeComponent implements OnDestroy {
private twitter: any;
constructor(private _router: Router) {
this.initTwitterWidget();
}
initTwitterWidget() {
this.twitter = this._router.events.subscribe(val => {
if (val instanceof NavigationEnd) {
(<any>window).twttr = (function (d, s, id) {
let js: any, fjs = d.getElementsByTagName(s)[0],
t = (<any>window).twttr || {};
if (d.getElementById(id)) return t;
js = d.createElement(s);
js.id = id;
js.src = "https://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js, fjs);
t._e = [];
t.ready = function (f: any) {
t._e.push(f);
};
return t;
}(document, "script", "twitter-wjs"));
if ((<any>window).twttr.ready())
(<any>window).twttr.widgets.load();
}
});
}
ngOnDestroy() {
this.twitter.unsubscribe();
}
}
这篇关于Angular 2 上的 Twitter 小部件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!