我想基于窗口重新调整大小事件(加载和动态)执行一些任务.
目前我有我的DOM如下:
<div id="Harbour">
<div id="Port" (window:resize)="onResize($event)" >
<router-outlet></router-outlet>
</div>
</div>
事件正确触发
export class AppComponent {
onResize(event) {
console.log(event);
}
}
如何从此事件对象中检索宽度和高度？
谢谢.
如何强制组件在Angular 2中重新渲染？出于调试目的,使用Redux我想强制组件重新渲染它的视图,这可能吗？
试图找出如何在Angular2中调整事件大小时获取窗口宽度.这是我的代码:
export class SideNav {
innerWidth: number;
constructor(private window: Window){
let getWindow = function(){
return window.innerWidth;
};
window.onresize = function() {
this.innerWidth = getWindow();
console.log(getWindow());
};
}
我在bootstrap.ts文件中全局导入窗口提供程序,使用提供从我的应用程序访问窗口.我遇到的问题是这确实给了我一个窗口大小,但是在调整窗口大小时 - 即使窗口改变大小,它也会反复重复相同的大小.请参阅console.log示例图片: 截图图片
我的总体目标是能够将窗口编号设置为变量onresize,以便我可以在模板中访问它.我在这里做错了什么想法？
谢谢!
我正在创建一个调用Facebook javascript api的Facebook服务,并且想知道如何在我的值更新时最好地实现更改检测.
我有一个UserService具有currentUser属性,它是一个BehaviorSubject:
currentUser: Subject<User> = new BehaviorSubject<User>(new User(null));
而当我想以响应的JavaScript SDK告诉我,在用户登录或注销Facebook的更新用户,我更新,需要调用tick()上ApplicationRef:
updateUser(user: User) {
console.log('UserService.updateUser:', user);
this.currentUser.next(user);
this.appRef.tick(); // UI does not update without this
}
constructor(facebook: Facebook) {
this.facebook.facebookEvents.filter(x => x != null
&& x.eventName == 'auth.authResponseChange')
.subscribe((event) => {
this.updateUser(new User(event.data));
}
}
在我的组件中,我在构造函数中存储来自用户服务的'currentUser'并绑定到value属性:
<h2>Logged into Facebook as {{currentUser.value.name}}</h2>
<p>Is this you? <img src="{{currentUser.value.profilePicUrl}}"></p>
难道我做错了什么？有没有比从外部库触发更改后调用ApplicationRef.tick()更好的方法？
我尝试使用NgZone并且不起作用,使用不同的事件返回Feed中的帖子作为服务页面通过它们:
constructor(userService: UserService, private ref: ApplicationRef, private zone: NgZone)
...
this.postsSubject.subscribe((post) => …