如何在Angular中结合RxJS实现Observable的条件式完成

首先需要纠正一个误区：take(0)会让Observable立即完成，不会发射任何值，你的subscribe回调根本不会执行。如果你的需求是当observerMode为false时，仅获取一次屏幕尺寸状态就停止监听，应该用take(1)替代take(0)。

下面是两种实现条件式添加操作符的简洁方式：

方式一：动态组合操作符数组 #

这种方式最直接，适合你的场景：

import { BreakpointObserver, BreakpointState } from '@angular/cdk/layout';
import { Component, Input, OnInit } from '@angular/core';
import { take } from 'rxjs';

@Component({
  selector: 'app-sidebar',
  templateUrl: './sidebar.component.html',
  styleUrls: ['./sidebar.component.scss']
})
export class SidebarComponent implements OnInit {

  @Input() observerMode: boolean = false;
  isMobile: boolean = false;

  constructor(private breakpointObserver: BreakpointObserver) { }

  ngOnInit(): void {
    // 根据observerMode决定是否添加take(1)
    const pipeOperators = [];
    if (!this.observerMode) {
      pipeOperators.push(take(1));
    }

    this.breakpointObserver
      .observe(['(min-width: 750px)'])
      .pipe(...pipeOperators)
      .subscribe((state: BreakpointState) => {
        this.isMobile = !state.matches;
        console.log(this.isMobile ? 'mobile' : 'desktop');
      });
  }
}

方式二：使用iif操作符（适合复杂条件场景） #

如果后续有更复杂的分支逻辑，可以用RxJS的iif操作符实现：

import { BreakpointObserver, BreakpointState } from '@angular/cdk/layout';
import { Component, Input, OnInit } from '@angular/core';
import { iif, of } from 'rxjs';
import { concatMap, take } from 'rxjs/operators';

@Component({
  selector: 'app-sidebar',
  templateUrl: './sidebar.component.html',
  styleUrls: ['./sidebar.component.scss']
})
export class SidebarComponent implements OnInit {

  @Input() observerMode: boolean = false;
  isMobile: boolean = false;

  constructor(private breakpointObserver: BreakpointObserver) { }

  ngOnInit(): void {
    this.breakpointObserver
      .observe(['(min-width: 750px)'])
      .pipe(
        concatMap(state => 
          iif(
            () => this.observerMode,
            of(state), // 监听模式下持续推送状态变化
            of(state).pipe(take(1)) // 非监听模式下仅推送一次
          )
        )
      )
      .subscribe((state: BreakpointState) => {
        this.isMobile = !state.matches;
        console.log(this.isMobile ? 'mobile' : 'desktop');
      });
  }
}

补充说明 #

• 第一种方式代码更简洁，完全满足你的需求；
• 简化了subscribe内的逻辑，直接通过!state.matches赋值isMobile，避免冗余的if-else判断；
• 记得在组件销毁时取消订阅（比如用takeUntil），防止内存泄漏，尤其是在observerMode为true的持续监听场景下。

内容的提问来源于stack exchange，提问作者Gerardo Guevara