Angular 2媒体查询

发布时间：2020-12-17 06:51:25 所属栏目：安全来源：网络整理

导读：我想知道Angular 2提供了一种确定客户端设备(大屏幕,中等或小屏幕)的方法,或者可能是屏幕宽度,基本上可以显示或隐藏某些内容(从dom中删除). 解决方法 HostListener 一种方法是使用HostListener装饰器.当host元素发出指定的事件时,将调用trim方法. @HostListe

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

解决方法

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]属性隐藏内容取决于您的宽度或高度值.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!