Question

我正在尝试创建一个Angular服务，组件可以使用它来监视窗口调整大小事件。经过大量尝试，我终于发现此解决方案最有效https://stackoverflow.com/a/43833815。

但是，在SSR中运行时似乎会导致错误。

TypeError: this.eventManager.addGlobalEventListener is not a function

经过多次尝试，这就是我的位置：

服务

import { Injectable, Inject, PLATFORM_ID } from '@angular/core';
import { EventManager } from '@angular/platform-browser';
import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';

@Injectable()
export class WindowService {
  private resizeSubject: Subject<Window>;

  constructor(
    @Inject(PLATFORM_ID) private eventManager: EventManager) { // Event is not defined without @Inject(PLATFORM_ID) 
      this.resizeSubject = new Subject();

      this.eventManager.addGlobalEventListener('window', 'resize', this.onResize.bind(this));
  }

  private onResize(event: UIEvent) {
    this.resizeSubject.next(<Window>event.target);
  }

  /**
   * Get an observerable for the window resize event
   * @returns   Return the window resize as an observable
   */
  get onResize$(): Observable<Window> {
    return this.resizeSubject.asObservable();
  }
}

组件

import { Component, ElementRef, Input, OnInit, Output, EventEmitter, OnDestroy } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
import { Subscription } from 'rxjs/Subscription';

import { WindowService } from '../../services/window.service';


@Component({
  selector: 'app-sidebar',
  templateUrl: './sidebar.component.html'
})

export class SidebarComponent implements OnInit, OnDestroy {
  element: HTMLElement;
  resizeSubscription: Subscription;

  constructor(
    private readonly el: ElementRef,
    private windowService: WindowService) {
      this.element = el.nativeElement;
  }

  ngOnInit(): void {
    const self = this;

    this.resizeSubscription = this.windowService.onResize$
      .debounceTime(100)
      .subscribe(function(windowObj) {
        if (windowObj.innerWidth >= 1024) {
          self.open();
        } else {
          self.close();
        }
      });
  }

  ngOnDestroy(): void {
    if (this.resizeSubscription) {
      this.resizeSubscription.unsubscribe();
    }
  }

  ...
}

绑定到窗口大小调整事件似乎是一种非常复杂的方法，但是我还没有找到与Angular SRR一起使用的更好的方法。有建议的方法吗？基本上，我需要在调整大小（以及加载时）时检查窗口大小，并相应地打开或关闭侧栏。

Answer 1

<div (window:resize)="onResize($event)"

方法：

onResize(event) {
  event.target.innerWidth;
}

或

@HostListener('window:resize', ['$event'])
onResize(event) {
  event.target.innerWidth;
}

受支持的全局目标是window，document和body。

Answer 2

您可以使用platformId编写不同的代码服务器和浏览器：

 constructor( @Inject(PLATFORM_ID) private platformId: Object, private eventManager: EventManager) {
      this.resizeSubject = new ReplaySubject();
    if (isPlatformBrowser(this.platformId)) {
      this.eventManager.addGlobalEventListener('window', 'resize', this.onResize.bind(this));
    }
  }

对于用户全局窗口，文档，事件编写，例如：https://github.com/Angular-RU/angular-universal-starter/blob/6d1e980655a55b2e1651ac5d040aaff80bc8fe8c/server.ts#L13

Angular SSR窗口调整大小事件

2 个答案: