Angular Material Flex MediaObserver订阅了两次

Question

我正在使用Material Flex Layout来检测屏幕尺寸。但是我得到了两次订阅结果。在另一个Angular项目中使用相同代码也可以。

res

这是我的代码。

Answer 1

很难说为什么使用提供的代码会产生两次发射。但是，您可以使用rxjs distinctUntilKeyChanged运算符；

constructor(public mediaObserver: MediaObserver) {
  mediaObserver.media$.pipe(distinctUntilKeyChanged('mqAlias'))
    .subscribe((change: MediaChange) => {
      if (change.mqAlias == 'xs') {
        console.log('xsA');
      } else if (change.mqAlias == 'sm') {
        console.log('xsB');
      } else {
        console.log('xsC');
      }
    });
}

我还发现了以下可能相关的问题；

https://github.com/angular/flex-layout/issues/504

https://github.com/angular/flex-layout/issues/1059