Angular 2 Media Queries

Question

Я хочу знать, что функция Angular 2 обеспечивает способ определения устройства клиента (экран большого экрана, среднего или малого размера) или может быть шириной экрана, на основе которой может отображаться или скрываться некоторое содержимое (удален из дома).

Answer 1

HostListener

Один из способов заключается в использовании HostListener декоратора. Выбранный метод будет вызываться, когда элемент хоста выдает указанное событие.

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

Via ngZone

Другой способ импортировать ngZone в компонент. Затем вы можете использовать NgZone, чтобы проверить событие onresize.

constructor(ngZone:NgZone) { 
    window.onresize = (e) => { 
    ngZone.run(() => { 
     this.width = window.innerWidth; 
     this.height = window.innerHeight; 
    }); 
    }; 
} 

После этого вы можете использовать атрибут [hidden], чтобы скрыть содержимое зависит от вашего значения ширина или высота.

Answer 2

Нет необходимости использовать NgZone. Есть более простые способы захвата события окна изменения размера.

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

или если вы хотите использовать, если из HTML

<div (window:resize)="onResize($event)" 

onResize(event) { 
    event.target.innerWidth; 
}