Angular 2 媒体查询答案

【问题标题】：Angular 2 Media QueriesAngular 2 媒体查询
【发布时间】：2016-06-28 17:58:50
【问题描述】：

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

【问题讨论】：

标签： angular angular2-template angular2-services

【解决方案1】：

主机监听器

一种方法是使用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] 属性隐藏内容，具体取决于您的 width 或 height 值。

【讨论】：

非常感谢马克西米利安。还有一个问题，使用 NgZone 是否会增加任何开销或可能导致任何性能问题？
@NaveedAhmed 我的理解是 NgZone#run 可以在处理程序中用于一些在 Angular 更改检测之外运行的异步进程。在这种情况下，我们希望对从 Angular 外部发出的 onresize 事件做出反应，因此为了在 Angular 的更改检测周期内对该事件做出反应，我们可以在窗口上为该事件注册一个侦听器并使用 @987654329 @ 安排从角度区域内执行的处理。 TLDR 虽然如果您安排在区域中执行的逻辑过多，您可能会遇到性能问题，但这个示例对我来说看起来不错。

【解决方案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;
}

【讨论】：