Angular 6 服务调整大小事件

Question

是否可以从 Angular6 服务监听 window 调整大小？我可以使用以下组件从组件中做到这一点：

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

然而，这似乎不适用于服务。

Answer 1

在这种情况下，您可以在 app.component 中订阅 'window:resize' 并拥有一个可以处理所有数据的服务。取决于你想用它做什么。

例如，如果您只想存储（和共享）window 大小，您应该有一项服务：

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();
  }
}

到目前为止，这是最通用的解决方案，涵盖了您需要通过服务处理数据并在应用程序之间共享数据的大多数情况

Answer 2

@HostListener 将侦听器附加到宿主元素。它只接受 keydown 和 keyup 事件。

因此无法从 HostListener

调整 windows 的大小

Answer 3

您好，您可以在构造函数中附加事件管理器并在函数中处理它，所有这些都可以在服务中。

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 4

您可以创建一个 observable 来侦听 window 在服务中调整大小并从组件中侦听它。

在服务文件中：

public resizeObservable$: Observable<boolean> = fromEvent(window, 'resize').pipe(map(_ => window.innerWidth < 480));

在组件文件中：

    this.appService.resizeObservable$.pipe(takeUntil(this.destroyNotifier$)).subscribe(x => {
      // do changes based on the info
      this.isMobile = x;
    });

Angular 6 服务调整大小事件

Angular 6 service resize event

resize

angular

angular6