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

我想在页面加载时执行页面。

我在这里缺少什么？

Answer 1

在组件/指令被初始化之前，load事件已经发生。

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

Answer 2

我使用OnInit解决了这个问题

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

在您的组件类内部放这个。.

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

使用@HostListener进行Angular 4加载事件

2 个答案: