Событие изменения размера углового окна SSR - PullRequest
Новая
       9

Событие изменения размера углового окна SSR

0 голосов
/ 04 июля 2018

Я пытаюсь создать службу 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. Есть ли рекомендуемый подход для этого? По сути, мне нужно проверить размер окна при изменении размера (а также при загрузке) и соответственно открыть или закрыть боковую панель.

Ответы [ 2 ]

0 голосов
/ 14 января 2019

Вы можете использовать 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

0 голосов
/ 04 июля 2018 
<div (window:resize)="onResize($event)"

Метод: 

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

или 

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

Поддерживаемые глобальные цели: window, document и body.

...