如何为不同BehaviorSubject复用Banner服务的函数？

原有全局Banner实现 #

我此前在应用顶部实现了全局Banner，通过BehaviorSubject展示错误、警告、成功等提示，具体实现如下：

主组件代码 #

app.component.html中引用Banner组件：

<baner [alerts]="alerts$ | async"></baner>

组件类中从服务获取数据：

ngOnInit(): void { 
  this.alerts$ = this.bannerService.alerts$; 
}

原有BannerService代码 #

alertSub$ = new BehaviorSubject<string>('');
alerts$ = this.alertSub$.asObservable();

showWarning(message: string): void {
  const newAlert = { message, type: 'Warning' };
  this.alertSub$.next([...this.alertSub$.getValue(), newAlert]);

  setTimeout(() => this.dismiss(newAlert), 500);
}

dismiss(alert): void {
   const updatedAlerts = this.alertSub$.getValue().filter(alertSub => alertSub !== alert);
   this.alertSub$.next(updatedAlerts);
}

// 其他类型提示方法（如showError、showSuccess等）

调用时只需执行this.bannerService.showWarning('some msg')即可展示全局提示。

当前遇到的问题 #

现在需要在某组件内添加独立Banner，仅展示该组件自身的提示，与全局Banner互不干扰。我尝试给服务新增componentSub$，并给所有提示方法添加BehaviorSubject参数，但这样需要修改所有原有调用，成本太高，寻求更优实现。

修改后的服务代码：

alertSub$ = new BehaviorSubject<string>('');
alerts$ = this.alertSub$.asObservable();

componentSub$ = new BehaviorSubject<string>('');
componentAlerts$ = this.componentSub$.asObservable();

showWarning(message: string, banner: BehaviorSubject<string>): void {
  const newAlert = { message, type: 'Warning' };
  banner.next([...banner.getValue(), newAlert]);

  setTimeout(() => this.dismiss(newAlert, banner), 500);
}

dismiss(alert, banner: BehaviorSubject<string>): void {
   const updatedAlerts = banner.getValue().filter(alertSub => alertSub !== alert);
   banner.next(updatedAlerts);
}

// 其他类型提示方法

优化方案 #

方案1：封装Banner实例类（推荐） #

把Banner的核心逻辑封装成独立类，服务中提供全局实例和创建新实例的方法，既复用逻辑又不改动原有调用。

1.1 创建BannerInstance类

export class BannerInstance {
  // 修正类型：原代码用<string>但实际存储对象数组，这里改为<any[]>或定义Alert接口
  private alertSub$ = new BehaviorSubject<any[]>([]);
  public alerts$ = this.alertSub$.asObservable();

  showWarning(message: string): void {
    const newAlert = { message, type: 'Warning' };
    this.alertSub$.next([...this.alertSub$.getValue(), newAlert]);
    setTimeout(() => this.dismiss(newAlert), 5000); // 建议延长超时时间，500ms过短
  }

  dismiss(alert: any): void {
    const updatedAlerts = this.alertSub$.getValue().filter(item => item !== alert);
    this.alertSub$.next(updatedAlerts);
  }

  // 其他提示方法（showError、showSuccess等）同理实现
}

1.2 修改BannerService

@Injectable({ providedIn: 'root' })
export class BannerService {
  // 全局Banner实例
  public globalBanner = new BannerInstance();

  // 创建独立Banner实例的方法
  createBanner(): BannerInstance {
    return new BannerInstance();
  }
}

1.3 使用方式

• 全局Banner：原有调用无需修改

this.bannerService.globalBanner.showWarning('全局警告提示');

主组件HTML保持不变：

<baner [alerts]="bannerService.globalBanner.alerts$ | async"></baner>

• 组件内独立Banner：
  组件类中创建实例：

private componentBanner: BannerInstance;

constructor(private bannerService: BannerService) {}

ngOnInit(): void {
  this.componentBanner = this.bannerService.createBanner();
}

组件HTML引用：

<baner [alerts]="componentBanner.alerts$ | async"></baner>

调用组件内提示：

this.componentBanner.showWarning('组件专属警告');

方案2：多实例服务（适合懒加载/独立作用域组件） #

如果组件是懒加载或需要完全独立的服务实例，可以在组件的providers中声明BannerService，这样每个组件会获取独立的服务实例，与全局服务互不干扰。

组件代码：

@Component({
  selector: 'app-target-component',
  templateUrl: './target-component.component.html',
  providers: [BannerService] // 每个组件实例拥有独立服务
})
export class TargetComponent {
  alerts$ = this.bannerService.alerts$;

  constructor(private bannerService: BannerService) {}

  showComponentAlert() {
    this.bannerService.showWarning('组件专属提示');
  }
}

全局Banner仍使用根注入的服务，原有调用无需修改。

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