[英]Angular 4 load event with @HostListener
这就是我想要做的:
import { Directive, HostListener, Input } from '@angular/core';
@Directive({
selector: '[appResizeWindow]'
})
export class ResizeWindowDirective {
@Input('appResizeWindow') line_ChartOptions: {};
constructor() { }
@HostListener('window:resize', ['$event']) onResize(event: Event) {
console.log('Yo');
if (event.target['innerWidth'] < 420)
this.line_ChartOptions['hAxis']['format'] = 'MMM';
else if (event.target['innerWidth'] < 760)
this.line_ChartOptions['hAxis']['format'] = 'MM. yy\'';
else this.line_ChartOptions['hAxis']['format'] = 'MMM d, yyyy';
}
@HostListener('load', ['$event']) onPageLoad(event: Event) {
console.log('loaded');
this.onResize(event.target['innerWidth']);
}
}
所以当我在模板中攻击时,'window.resize' 工作得很好。
问题出在负载上。 我事件尝试过加载
我希望页面在加载页面时执行。
我在这里错过了什么?
在组件/指令被初始化之前, load
事件已经发生。
只需将您的代码添加到ngAfterViewInit()
如果您的组件/指令在首次初始化后被删除并重新添加,您需要注意不要使用全局服务或静态变量多次执行代码存储状态。
试试这个,这会奏效。
@HostListener('window:load',['$event'])
onPageLoad(event: Event) {
console.log('loaded',event);
}
我用OnInit解决了这个问题
import { Directive, HostListener, Input, OnInit } from '@angular/core';
你的组件类里面放了这个..
ngOnInit() {
// Code to be executed on Init
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.