访问AoT编译的Angular应用程序中的窗口属性

import { Component, HostListener, Inject } from '@angular/core';
import { WINDOW } from '@ng-web-apis/common';

@Component({
  selector: 'app-my-component',
  template: `
    <p>窗口宽度: {{ windowWidth }}</p>
    <p>窗口高度: {{ windowHeight }}</p>
  `,
})
export class MyComponent {
  windowWidth: number;
  windowHeight: number;

  constructor(@Inject(WINDOW) private window: Window) {}

  @HostListener('window:resize')
  onWindowResize() {
    this.windowWidth = this.window.innerWidth;
    this.windowHeight = this.window.innerHeight;
  }
}

import { NgModule } from '@angular/core';
import { WINDOW_PROVIDERS } from '@ng-web-apis/common';

@NgModule({
  providers: [WINDOW_PROVIDERS],
})
export class AppModule {}