Angular SSR 窗口调整大小事件

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

您可以使用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

Answer 2

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

方法：

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

或

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

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