Question

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

Answer 1

<强> HostListener

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

@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。有更简单的方法来捕获调整大小窗口事件。

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

或者如果你想从HTML中使用if

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

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

Angular 2媒体查询

2 个答案: