Angular Material Flex MediaObserver 订阅了两次

Question

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

constructor(
    public mediaObserver: MediaObserver) {
     mediaObserver.media$.subscribe((change: MediaChange) => {
      if ( change.mqAlias == 'xs') {

        console.log('xsA');
      }else  if ( change.mqAlias == 'sm') {
        console.log('xsB');
      }else{
        console.log('xsC');
      }

    });
}

这是我的代码。

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