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

I have also tried the following:

конструктор (платформа: Platform) {
    platform.ready (). then ((readySource) => {
        console.log ('Ширина:' + platform.width ());
        console.log ('Высота:' + platform.height ());
    });
}

... который использовался в ionic.

And screen.availHeight, but still no success.

Ronit Oommen

Ответов: 10

Ответы (10)

Чтобы получить при инициализации

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

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

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

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

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

@Injectable()
export class WindowService {

  get windowRef() {
    return window;
  }

}

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

constructor(
    private windowService: WindowService
) { }

И поглотить ...

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

Для этого сценария вы можете использовать метод получения машинописного текста. Вот так

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

И используйте это в шаблоне следующим образом:

Вам не понадобится никакой обработчик событий для проверки изменения размера / размера окна, этот метод будет проверять размер каждый раз автоматически.

Это пример услуги, которую я использую.

Вы можете получить ширину экрана, подписавшись на 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 = new Subject();
  public screenWidth$: BehaviorSubject = new BehaviorSubject(null);
  public mediaBreakpoint$: BehaviorSubject = 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');
    }
  }

}

Надеюсь, это кому-то поможет

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

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

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

Если вы хотите отреагировать на определенные точки останова (например, сделать что-нибудь, если ширина меньше 768 пикселей), вы также можете использовать BreakpointObserver:

import {BreakpointObserver, Breakpoints} from '@angular/cdk/layout';

{ ... }

const isSmallScreen = breakpointObserver.isMatched('(max-width: 599px)');

или даже слушать изменения в этой точке останова:

breakpointObserver.observe([
  '(max-width: 768px)'
    ]).subscribe(result => {
      if (result.matches) {
        doSomething();
      } else {
        // if necessary:
        doSomethingElse();
      }
    });

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

Ответ очень прост. напишите приведенный ниже код

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

вы можете использовать это https://github.com/ManuCutillas/ng2-responsive Надеюсь, это поможет: -)

Теперь я знаю, что вопрос изначально относится к Размер экрана, поэтому в основном атрибуты width и height, но для большинства людей Точки останова - вот что действительно важно, поэтому для создания глобального решения многократного использования я бы предпочел использовать Angulars BreakpointObserver, чтобы справиться с этим.

Следующая конфигурация в основном представляет собой сервис с некоторыми функциями, которые могут возвращать an Observable и быть подписался где нужно:

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 {
    return this.observer.observe(['(max-width: 575px)']);
  }

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

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

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

Приведенный выше код можно настроить для работы с размером экрана bootstrap way (путем изменения max-width на min-width и добавления1px для каждого значения, и, конечно же, для инвертирования имен функцийs.)

Теперь в классе компонентов подойдет просто подписка на наблюдаемый, возвращаемый любой из вышеперечисленных функций.

т.е.: 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();

2022 WebDevInsider