Angular 6 service resize event

Question

Можно ли прослушивать изменение размера окна из сервиса Angular6?Я могу сделать это из компонента, используя:

 @HostListener('window:resize', ['$event'])
  onResize(event) {
    //perform actions
  }

Это, похоже, не работает для службы.

Answer 1

@ HostListener присоединяет слушателя к элементу хоста.он только примет события keydown и keyup.

, поэтому изменить размер окон из HostListener

невозможно

Answer 2

Привет, вы можете присоединиться к менеджеру событий в конструкторе и обработать его в функции, все это может быть в сервисе.

public appWidth: number = window.innerWidth; //default value
public appHeight: number = window.innerHeight; //default value

private OnResize(event: any) {
  this.appWidth = event.target.innerWidth;
  this.appHeight = event.target.innerHeight;
}

constructor(private eventManager: EventManager) {
  this.eventManager.addGlobalEventListener('window', 'resize', this.OnResize.bind(this));
}

Answer 3

В этом случае вы можете подписаться на 'window: resize' в app.component и иметь службу, которая будет обрабатывать все данные.Зависит от того, что вы хотите с ним сделать.

только для примера, если вы хотите просто сохранить (и поделиться) размером окна, у вас должна быть служба:

import { Injectable } from '@angular/core';
import { Subject, Observable } from 'rxjs';

@Injectable() // could be @Injectable({ providedIn: 'root' }) in 6+ version
export class ResizeService {

  currentSize$: Subject<number|string> = new Subject<number|string>();

  getSize(): Observable<number|string> {
    return this.currentSize$.asObservable();
  }

  setSize(size: number|string): void {
   this.currentSize$.next(size);
  }

}

Тогда вваш app.component.ts;

import { Component } from '@angular/core';
import { ResizeService } from '<path/to/service>';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  constructor(private resizeService: ResizeService) {}

  resizeHandler($event): void {
    this.resizeService.setSize($event.target.innerWidth);
  }
}

В любом компоненте, для которого вы хотите получить следующие значения:

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subject, Observable } from 'rxjs'
import { takeUntil } from 'rxjs/operators';
import { ResizeService } from '<path/to/service>';

@Component({
  selector: 'app-my-component',
  templateUrl: './my.component.html',
  styleUrls: ['./my.component.css']
})
export class MyComponent implements OnInit, OnDestroy {

  private unsubscribeHelper$: Subject<void> = new Subject<void>();
  public size: number | string;     

  constructor(private resizeService: ResizeService) {}

  ngOnInit(): void {
    this.resizeService.getSize().pipe(takeUntil(this.unsubscribeHelper$))
      .subscribe((size: number | string) => this.size = size);
  }

  ngOnDestroy(): void {
    this.unsubscribeHelper$.next();
    this.unsubscribeHelper$.complete();
  }
}

Пока что это наиболее универсальное решение, охватывающее большинство случаев, когда вам нужнообрабатывать данные через сервис и делиться ими с приложением