Angular 2 个媒体查询

Question

我想知道 Angular 2 是否提供了一种方法来确定客户端的设备（大屏幕、中屏幕或小屏幕）或者可能是可以显示某些内容的屏幕宽度或隐藏（从 dom 中删除）。

Answer 1

HostListener

一种方法是使用 HostListener 装饰器。当宿主元素发出指定事件时，将调用装饰方法。

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

通过 ngZone

另一种方法是将 ngZone 导入到您的组件中。然后你可以使用 NgZone 来检查 onresize 事件。

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

之后，您可以使用 [hidden] 属性隐藏内容，具体取决于您的 width 或 height 值。

Answer 2

不需要使用 NgZone。有更简单的方法来捕获调整大小 window 事件。

@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;
}

Angular 2 个媒体查询

Angular 2 Media Queries

angular

angular2-template

angular2-services