理解Angular中BehaviourSubject的行为与RxJS订阅的陷阱

import { Subject } from 'rxjs';
import { tap } from 'rxjs/operators';

export class MyComponent implements OnInit {
  exampleSubject = new Subject<string>();

  ngOnInit(): void {
    // 第一次订阅：在组件初始化时订阅一次
    this.exampleSubject.pipe(
      tap(value => console.log('Subscription 1:', value))
    ).subscribe();
  }

  emitValue(value: string) {
    this.exampleSubject.next(value);
  }
}

import { BehaviorSubject, Observable, Subject } from 'rxjs';
import { tap } from 'rxjs/operators';
import { HttpClient } from '@angular/common/http';
import { Injectable, OnInit } from '@angular/core';

// 假设的ITask接口
interface ITask {
  id: string;
  isImportant: boolean;
  text: string;
}

// 原始问题中的AppComponent片段，演示了重复订阅
export class AppComponent implements OnInit {
  public tasks!: BehaviorSubject<ITask[]>;
  constructor(private _tasksService: TasksService) {}

  ngOnInit(): void {
    console.log('OnInit');
    this.tasks = this._tasksService.getTasks();
  }

  public addTask() {
    this._tasksService.addTask({
      id: crypto.randomUUID(),
      isImportant: true,
      text: 'Added task'
    });

    // 错误示范：每次点击按钮都创建新的订阅
    this.tasks.pipe(tap((value) => console.log(value))).subscribe();
  }
}

// 修正后的AppComponent片段
export class AppComponent implements OnInit {
  public tasks!: BehaviorSubject<ITask[]>; // 注意：这里通常直接订阅，而不是持有Subject本身
  public taskList: ITask[] = []; // 用于在模板中迭代的数组

  constructor(private _tasksService: TasksService) {}

  ngOnInit(): void {
    console.log('OnInit');
    // 正确的做法：在ngOnInit中订阅一次，并将值赋给本地属性
    this._tasksService.getTasks().pipe(
      tap(tasks => console.log('Tasks updated:', tasks)) // 仅在此处进行日志记录
    ).subscribe(tasks => {
      this.taskList = tasks; // 将最新任务列表赋值给本地属性
    });
  }

  public addTask() {
    this._tasksService.addTask({
      id: crypto.randomUUID(),
      isImportant: true,
      text: 'Added task'
    });
    // 不再在此处创建新的订阅
  }
}

<ng-container *ngFor="let task of taskList"> <!-- 绑定到本地属性 -->
    {{task.text}}
    {{task.id}}
</ng-container>
<button type="button" (click)="addTask()">Add Task</button>

// AppComponent
export class AppComponent implements OnInit {
  public tasks$: Observable<ITask[]>; // 声明为Observable
  constructor(private _tasksService: TasksService) {}

  ngOnInit(): void {
    this.tasks$ = this._tasksService.getTasks(); // 直接获取Observable
    // 如果需要日志，可以在这里订阅，或者在服务中处理
    this.tasks$.pipe(
      tap(tasks => console.log('Tasks via async pipe:', tasks))
    ).subscribe(); // 仅用于日志，async pipe会自行管理订阅
  }

  public addTask() {
    this._tasksService.addTask({
      id: crypto.randomUUID(),
      isImportant: true,
      text: 'Added task'
    });
  }
}

// HTML模板
<ng-container *ngFor="let task of tasks$ | async">
    {{task.text}}
    {{task.id}}
</ng-container>
<button type="button" (click)="addTask()">Add Task</button>

@Injectable({
  providedIn: 'root'
})
export class TasksService {
  private _tasks: ITask[] = [];
  private _tasks$: BehaviorSubject<ITask[]> = new BehaviorSubject<ITask[]>([]);
  constructor(private _http: HttpClient) { }

  public getTasks() {
    this.getTasksObservableFromDb().pipe(
      tap(
        (tasks) => {
          this._tasks = tasks;
          this._tasks$.next(tasks); // 首次从DB获取后，将引用传递给BehaviourSubject
        }
      )
    ).subscribe();
    return this._tasks$;
  }

  public addTask(task: ITask) {
    this._tasks.push(task); // 直接修改了_tasks数组
    // this._tasks$.next(this._tasks); // 原始问题中被删除的行
  }

  // ... 其他方法
}

export class TasksService {
  // ...
  public addTask(task: ITask) {
    // 创建一个新的数组，包含旧元素和新元素，然后发出这个新数组的引用
    this._tasks = [...this._tasks, task];
    this._tasks$.next(this._tasks); // 发出新的数组引用
  }

  // 或者更简洁地直接操作并发出副本
  public addTaskV2(task: ITask) {
    const updatedTasks = [...this._tasks, task]; // 创建新数组
    this._tasks = updatedTasks; // 更新内部状态
    this._tasks$.next(updatedTasks); // 发出新数组
  }
}