Angular MediaChange 的 Flex-Layout MediaObserver 优先级

Question

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

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

工作代码示例：

  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() 来识别与当前视口匹配的查询？

谢谢。

Answer 1

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

MediaChange source code has an attribute called priority which give you the priority of activation where looks like on MediaChange[] is sort by descendent order.

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

Angular MediaChange 的 Flex-Layout MediaObserver 优先级

Angular Flex-Layout MediaObserver priority of the MediaChange

media

flexbox

angular