Angular Material Flex MediaObserver 订阅了两次

Question

我正在使用 Material Flex Layout 来检测屏幕 size.But 我得到了订阅结果 twice.The 另一个 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 operator;

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

Angular Material Flex MediaObserver 订阅了两次

Angular Material Flex MediaObserver Subscribed Twice

angular-flex-layout

angular