Question

目前我使用NgZone来运行媒体查询。我很好奇这是否是最好的方法。

import { NgZone } from '@angular/core';

const SMALL_WIDTH_BREAKPOINT = 840;

export class AppComponent implements OnInit {
  private mediaMatcher: MediaQueryList = matchMedia(`(max-width: ${SMALL_WIDTH_BREAKPOINT}px)`);
  constructor (
    zone: NgZone,
  ) {
    this.mediaMatcher.addListener(mql => zone.run(() => this.mediaMatcher = mql));
  }

  isScreenSmall(): boolean {
    return this.mediaMatcher.matches;
  }
}

Answer 1

我意识到这是一个非常老的问题，但是我在尝试做同样的事情时遇到了这个问题。

尽管您也可以将zone.js webapis-media-query文件导入到您的应用程序中，但是建议的方法看起来很不错，尽管无需使用zone.run即可完成。

l <- c(1:2, NA, 4:5) myfun <- function(i){ if(is.na(i)) next message(paste('test',i)) } lapply(l, myfun) (see zone.js non standard apis)

当尝试使用import 'zone.js/dist/webapis-media-query'将新的断点推送到Rxjs主题时，我遇到了这个问题。我正在组件中订阅该主题，并且值更改时，它没有触发模板中的更改检测。模板花费了大约5秒钟来更新（由于区域的定期更新）。导入matchMedia('...').addListener文件为我解决了这个问题。

如果不需要支持IE或Safari（在撰写本文时至少为12.1.2），则可以使用webapis-media-query似乎可以修补zone.js的语言，而无需导入该库。

我们的来源：

window.matchMedia('max-width: 648px').addEventListener('change', callback)

Angular：进行媒体查询的最佳方式

1 个答案: