检测Angular 4中的实时窗口大小变化

Question

我一直在尝试构建一个响应式导航栏并且不希望使用媒体查询，所以我打算使用*ngIf 和窗口大小作为标准。 但是我一直面临一个问题，因为我找不到任何关于 Angular 4 窗口大小检测的方法或文档。 JavaScript方法我也试过了，不支持。

我也试过following:

constructor(platform: Platform) {
    platform.ready().then((readySource) => {
        console.log('Width: ' + platform.width());
        console.log('Height: ' + platform.height());
    });
}

...在离子中使用。

还有screen.availHeight，但还是没有成功。

Answer 1

你可以用这个 https://github.com/ManuCutillas/ng2-responsive 希望它有所帮助:-)

Answer 2

在初始化时获取它

public innerWidth: any;
ngOnInit() {
    this.innerWidth = window.innerWidth;
}

如果你想在调整大小时保持更新：

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

Answer 3

Platformwidth() 和height() 的文档中指出，这些方法分别使用window.innerWidth 和window.innerHeight。但是使用这些方法是首选，因为维度是缓存值，这减少了多次和昂贵的 DOM 读取的机会。

import { Platform } from 'ionic-angular';

...
private width:number;
private height:number;

constructor(private platform: Platform){
    platform.ready().then(() => {
        this.width = platform.width();
        this.height = platform.height();
    });
}

Answer 4

如果您希望组件保持易于测试，您应该将全局窗口对象包装在 Angular 服务中：

import { Injectable } from '@angular/core';

@Injectable()
export class WindowService {

  get windowRef() {
    return window;
  }

}

然后您可以像任何其他服务一样注入它：

constructor(
    private windowService: WindowService
) { }

然后消费……

  ngOnInit() {
      const width= this.windowService.windowRef.innerWidth;
  }

Answer 5

如果您想对某些断点做出反应（例如，如果宽度为 768 像素或更小，则执行某些操作），您可以使用BreakpointObserver：

import { Component } from '@angular/core';
import { BreakpointObserver, BreakpointState } from '@angular/cdk/layout';

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

  constructor(
    private breakpointObserver: BreakpointObserver,
  ) {
    // detect screen size changes
    this.breakpointObserver.observe([
      "(max-width: 768px)"
    ]).subscribe((result: BreakpointState) => {
      if (result.matches) {
          // hide stuff        
      } else {
          // show stuff
      }
    });
  }
}

Answer 6

@HostListener("window:resize", [])
public onResize() {
  this.detectScreenSize();
}

public ngAfterViewInit() {
    this.detectScreenSize();
}

private detectScreenSize() {
    const height = window.innerHeight;
    const width = window.innerWidth;
}

Answer 7

这是我使用的服务示例。

您可以通过订阅screenWidth$，或通过screenWidth$.value获取屏幕宽度。

mediaBreakpoint$（或mediaBreakpoint$.value）也是如此

import {
  Injectable,
  OnDestroy,
} from '@angular/core';
import {
  Subject,
  BehaviorSubject,
  fromEvent,
} from 'rxjs';
import {
  takeUntil,
  debounceTime,
} from 'rxjs/operators';

@Injectable()
export class ResponsiveService implements OnDestroy {
  private _unsubscriber$: Subject<any> = new Subject();
  public screenWidth$: BehaviorSubject<number> = new BehaviorSubject(null);
  public mediaBreakpoint$: BehaviorSubject<string> = new BehaviorSubject(null);

  constructor() {
    this.init();
  }

  init() {
    this._setScreenWidth(window.innerWidth);
    this._setMediaBreakpoint(window.innerWidth);
    fromEvent(window, 'resize')
      .pipe(
        debounceTime(1000),
        takeUntil(this._unsubscriber$)
      ).subscribe((evt: any) => {
        this._setScreenWidth(evt.target.innerWidth);
        this._setMediaBreakpoint(evt.target.innerWidth);
      });
  }

  ngOnDestroy() {
    this._unsubscriber$.next();
    this._unsubscriber$.complete();
  }

  private _setScreenWidth(width: number): void {
    this.screenWidth$.next(width);
  }

  private _setMediaBreakpoint(width: number): void {
    if (width < 576) {
      this.mediaBreakpoint$.next('xs');
    } else if (width >= 576 && width < 768) {
      this.mediaBreakpoint$.next('sm');
    } else if (width >= 768 && width < 992) {
      this.mediaBreakpoint$.next('md');
    } else if (width >= 992 && width < 1200) {
      this.mediaBreakpoint$.next('lg');
    } else if (width >= 1200 && width < 1600) {
      this.mediaBreakpoint$.next('xl');
    } else {
      this.mediaBreakpoint$.next('xxl');
    }
  }

}

希望这对某人有所帮助

Answer 8

答案很简单。编写以下代码

import { Component, OnInit, OnDestroy, Input } from "@angular/core";
// Import this, and write at the top of your .ts file
import { HostListener } from "@angular/core";

@Component({
 selector: "app-login",
 templateUrl: './login.component.html',
 styleUrls: ['./login.component.css']
})

export class LoginComponent implements OnInit, OnDestroy {
// Declare height and width variables
scrHeight:any;
scrWidth:any;

@HostListener('window:resize', ['$event'])
getScreenSize(event?) {
      this.scrHeight = window.innerHeight;
      this.scrWidth = window.innerWidth;
      console.log(this.scrHeight, this.scrWidth);
}

// Constructor
constructor() {
    this.getScreenSize();
}
}

Answer 9

对于这种情况，您可以使用 typescript getter 方法。像这样

public get width() {
  return window.innerWidth;
}

并像这样在模板中使用它：

<section [ngClass]="{ 'desktop-view': width >= 768, 'mobile-view': width < 768 
}"></section>

您不需要任何事件处理程序来检查窗口的大小调整/，此方法每次都会自动检查大小。

Answer 10

现在我知道问题最初是指屏幕尺寸，所以基本上是width 和height 属性，但对于大多数人来说Breakpoints 才是真正重要的，因此，为了制定一个全局可重用的解决方案，我更愿意使用Angular 的BreakpointObserver 来处理这个问题。

以下配置基本上是service 和一些functions，可以return 和Observable<BreakpointState> 并在需要时成为subscribed：

import { Injectable } from '@angular/core';
import { BreakpointObserver, BreakpointState } from '@angular/cdk/layout';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root',
})
export class ScreenService {

  constructor(private observer: BreakpointObserver) {}

  isBelowSm(): Observable<BreakpointState> {
    return this.observer.observe(['(max-width: 575px)']);
  }

  isBelowMd(): Observable<BreakpointState> {
    return this.observer.observe(['(max-width: 767px)']);
  }

  isBelowLg(): Observable<BreakpointState> {
    return this.observer.observe(['(max-width: 991px)']);
  }

  isBelowXl(): Observable<BreakpointState> {
    return this.observer.observe(['(max-width: 1199px)']);
  }
}

上面的代码可以调整以处理bootstrap方式的屏幕大小（通过将max-width更改为min-width并为每个值添加1px，当然还有反转functions名称.)

现在在component class 中，只需将subscribing 转换为上述任何函数返回的observable 即可。

即：app.component.ts：

export class AppComponent implements AfterViewInit {

  isBelowLg: boolean;

  constructor(private screenService: ScreenService) {}

  ngAfterViewInit(): void {
    this.screenService.isBelowLg().subscribe((isBelowLg: BreakpointState) => {
      this.isBelowLg = isBelowLg.matches;
    });
  }
}

请参阅 AfterViewInit 生命周期钩子在视图初始化后使用 detectChanges() 会省去很多麻烦。

编辑：

作为AfterViewInit 的替代方案，它是相同的，但另外，您需要使用ChangeDetectorRef 到detectChanges()，只需在订阅组件中注入一个实例即：app.component.ts像这样：

constructor(
    private screenService: ScreenService,
    private cdref: ChangeDetectorRef
  ) {}

之后，只需拨打detectChanges() 即可：

this.cdref.detectChanges();