MediaChange 的 Angular Flex-Layout MediaObserver 优先级答案

【问题标题】：Angular Flex-Layout MediaObserver priority of the MediaChangeMediaChange 的 Angular Flex-Layout MediaObserver 优先级
【发布时间】：2020-10-22 20:36:01
【问题描述】：

当我通过 MediaObserver 观察媒体变化时，如何获取 MediaChange[] 的当前变化？

我观察到当前是数组MediaChange[]中的第一项，我可以使用第一项。 Bu 我还观察到，在 MediaChange has a priority 我还观察到当前更改具有最高优先级。哪个是最好的？

工作代码示例：

  constructor(mediaObserver: MediaObserver) {
    this.mediaObserverAsObservable = mediaObserver.asObservable().subscribe((changes: MediaChange[]) => {
      // option A.
      const currentMediaChange = changes[0];
      if (currentMediaChange.mqAlias === 'sm' || currentMediaChange.mqAlias === 'xs') {
        if (this.sidenav) {
          this.sidenav.close();
        }
      } else {
        if (this.sidenav) {
          this.sidenav.open();
        }
      }
      
      // Option B.
      const maxPriority = changes.reduce(
        (currentMax, mediaChange) => (mediaChange.priority > currentMax ? mediaChange.priority : currentMax),
        changes[0].priority
      );
      const currentMediaChange = changes.find(mc => mc.priority === maxPriority);
      if (currentMediaChange) {
        if (currentMediaChange.mqAlias === 'sm' || currentMediaChange.mqAlias === 'xs') {
          if (this.sidenav) {
            this.sidenav.close();
          }
        } else {
          if (this.sidenav) {
            this.sidenav.open();
          }
        }
      }
    });
  }

或者我可以使用 mediaObserver.isActive() 来识别与当前视口匹配的查询？

谢谢。

【问题讨论】：

标签： angular flexbox media

【解决方案1】：

在 7.0.0-beta.24 (2019-03-17) 上，angular/flex-layout 做了一个中断更改，所以 mediaObserver.asObservable() 是一个可观察的返回 MediaChange[]

MediaChange source code 有一个名为priority 的属性，它为您提供激活的优先级，其中MediaChange[] 上看起来是按descendent order 排序的。

换句话说，最高优先级是第一。我认为选项 A 是基于上述的最佳选项。因为你应该选择活跃的mediaQuery，它是最高优先级的。当我们知道它在第一位时，不需要使用reduce。

【讨论】：