Определить размер окна с помощью углового 4

Я пытаюсь создать отзывчивую навигационную панель и не хочу использовать медиа-запрос, поэтому я намерен использовать *ngIF с размером окна в качестве критерия. Но у меня возникла проблема, так как я не могу найти какой-либо метод или документацию по определению размера окна с угловым 4. Я также пробовал метод JavaScript, но он не поддерживается.

Я также пробовал следующее:

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

... который использовался в ионной форме.

И screen.availHeight, но все равно безуспешно.

ОТВЕТЫ

Ответ 1

Чтобы получить его на init

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

Если вы хотите обновить его при изменении размера:

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

Ответ 2

Документация для width() Platform width() и 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();
    });
}

Ответ 4

Если вы хотите, чтобы компоненты оставались легко проверяемыми, вы должны обернуть глобальный объект окна в Угловой службе:

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

@Injectable()
export class WindowService {

  get windowRef() {
    return window;
  }

}

Затем вы можете вводить его, как и любую другую услугу:

constructor(
    private windowService: WindowService
) { }

И потребляйте...

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