我应该取消订阅 Angular 的 Flex 布局中的 MediaObserver 订阅吗？

Question

在 Angular 组件中，我使用以下代码根据屏幕分辨率显示不同的元素：

constructor(private mediaObserver: MediaObserver) {}

private mySubscription: Subscription;

public ngOnInit(): void {
    this.mySubscription = this.mediaObserver.asObservable().subscribe(() => {
        if (this.mediaObserver.isActive('gt-md')) {
          // Do some stuff...
        }
      }
    );
  }

我的问题是，我是否需要取消订阅mySubscriptionin ngOnDestroy()，还是需要MediaObserver自行取消订阅？

Answer 1

来自 README.md 中的示例（https://github.com/angular/flex-layout/wiki/MediaObserver）

export class MyDemo implements OnDestroy {
  watcher: Subscription;
  activeMediaQuery = '';

  constructor(mediaObserver: MediaObserver) {
    this.watcher = mediaObserver.media$.subscribe((change: MediaChange) => {
      this.activeMediaQuery = change ? `'${change.mqAlias}' = (${change.mediaQuery})` : '';
      if ( change.mqAlias == 'xs') {
         this.loadMobileContent();
      }
    });
  }

  ngOnDestroy() {
    this.watcher.unsubscribe();
  }

  loadMobileContent() { 
    // Do something special since the viewport is currently
    // using mobile display sizes
  }
}

是的，您需要在 中取消订阅ngOnDestroy()。