Angular 4中使用@HostListener加载事件

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' 在模板中使用时效果很完美。

问题出在加载上。我甚至尝试了onload。

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

我错过了什么？

- Jonathan Tugg

Answer 1

< p > 在您的组件/指令初始化之前，“load”事件已经发生。< /p > < p > 只需将您的代码添加到 < code > ngAfterViewInit() < /code > 如果在首次初始化后删除并重新添加了您的组件/指令，则需要自行注意代码不会被执行多次，可以使用全局服务或静态变量来存储状态。 < /p >

- Günter Zöchbauer

---

到指令本身？ - Jonathan Tugg

@onetwo12 我知道什么是生命周期钩子。我不理解的是如何将在组件内部的AfterViewInit中的内容与指令上的HostListener连接起来？ - Jonathan Tugg

@JonathanTugg 如果指令在应用程序最初加载时（当它在AppComponent中）或添加到AppComponent或其任何子级中的任何组件或指令中（没有*ngIf或类似的内容，可能会防止其在应用程序加载时被添加），则可以使用该指令。 - Günter Zöchbauer

哦，我应该将目前在ngOnInit中的代码放到AfterViewInit中。我是对的吗？ - Jonathan Tugg

一个常见的例子可能很酷。无论如何，我已将此主题标记为已解决，因为它给了我对我的问题的提示。 - Jonathan Tugg

@JonathanTugg 你是怎么解决这个问题的？ - Marcio M.

Answer 2

试试这个，它会起作用。

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

- KK Raghuvanshi

---

你能解释一下它是如何解决这个问题的吗？ - gru

Answer 3

我用OnInit解决了这个问题

import { Directive, HostListener, Input, OnInit } from '@angular/core';

在你的组件类中加入这个代码...

ngOnInit() {
  // Code to be executed on Init
}

- Sergi