如何复用同一Service实现多个Slide Out的切换功能？

核心改造思路 #

原服务用单个BehaviorSubject管理所有Slide Out状态，无法区分不同实例。我们通过**唯一标识（key）**绑定每个Slide Out的状态，用Map存储多个BehaviorSubject实例，实现状态完全隔离。

改造后的服务代码 #

import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class DataShareService {
  // 用Map存储不同Slide Out的状态源，key为唯一标识（如'chat'、'settings'）
  private slideoutSources = new Map<string, BehaviorSubject<boolean>>();

  /**
   * 获取指定Slide Out的状态Observable
   * @param key Slide Out的唯一标识
   */
  getSlideoutStatus$(key: string): Observable<boolean> {
    // 若key不存在，初始化默认状态（这里设为true，可根据需求调整）
    if (!this.slideoutSources.has(key)) {
      this.slideoutSources.set(key, new BehaviorSubject<boolean>(true));
    }
    return this.slideoutSources.get(key).asObservable();
  }

  /**
   * 切换指定Slide Out的状态
   * @param key Slide Out的唯一标识
   */
  toggleSlideout(key: string) {
    const source = this.slideoutSources.get(key);
    if (source) {
      source.next(!source.value);
    } else {
      // 若key未初始化，直接创建并设为false（可按需调整默认值）
      this.slideoutSources.set(key, new BehaviorSubject<boolean>(false));
    }
  }

  /**
   * 手动设置指定Slide Out的状态（可选，增加灵活性）
   * @param key Slide Out的唯一标识
   * @param status 目标状态（true/false）
   */
  setSlideoutStatus(key: string, status: boolean) {
    if (!this.slideoutSources.has(key)) {
      this.slideoutSources.set(key, new BehaviorSubject<boolean>(status));
    } else {
      this.slideoutSources.get(key).next(status);
    }
  }
}

改造组件代码 #

触发组件（如ChatsComponent） #

调用toggleSlideout时传入当前Slide Out的唯一key：

export class ChatsComponent implements OnInit {

  constructor(private dataShare: DataShareService) { }

  toggleChat() {
    // 传入'chat'作为当前Slide Out的唯一标识
    this.dataShare.toggleSlideout('chat');
  }

  ngOnInit(): void {
  }

}

承载Slide Out的组件（如ChatWindowComponent） #

订阅对应key的状态流：

import { Subscription } from 'rxjs';
export class ChatWindowComponent implements OnInit {
  open: boolean;
  private subscription: Subscription;
  chatTitle = 'Your Conversations';
  
  constructor(private dataShare: DataShareService) { }

  ngOnInit() {
    // 订阅'chat'对应的状态
    this.subscription = this.dataShare.getSlideoutStatus$('chat').subscribe(value => this.open = value);
  }

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

}

添加新的Slide Out实例 #

如果要新增一个设置面板的Slide Out，只需重复以下步骤：

1. 触发组件调用toggleSlideout('settings')
2. 承载组件订阅getSlideoutStatus$('settings')

这样多个Slide Out的状态完全独立，互不干扰。

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