带有@HostListener的Angular 4加载事件

Question

这就是我想要做的：

 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’ 工作得很好。

问题出在 负载 上。我事件尝试过 加载

我希望页面在加载页面时执行。

我在这里错过了什么？

原文由 Jonathan Tugg 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

load 事件甚至在你的组件/指令初始化之前就已经发生了。

只需将您的代码添加到 ngAfterViewInit() 如果您的组件/指令在首次初始化后被删除并重新添加，您需要注意使用全局服务不会多次执行代码或用于存储状态的静态变量。

原文由 Günter Zöchbauer 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

试试这个，这会奏效。

 @HostListener('window:load',['$event'])
onPageLoad(event: Event) {
   console.log('loaded',event);
}

原文由 KK Raghuvanshi 发布，翻译遵循 CC BY-SA 4.0 许可协议