Angular 12 项目用Observable展示todos数组，新增数据后页面不显示求助

• 核心原因是使用了普通Subject作为事件载体：普通Subject仅会向订阅后产生的新事件的订阅者推送数据，不会留存历史值。路由跳转离开todos页面时原组件销毁、订阅取消，跳转返回后新组件初始化时才订阅Subject，此时新增todo触发的next调用已经执行完成，新订阅无法拿到当前已有的todo数组数据，导致页面渲染空。
• 次要问题：todos.component.ts中todos变量未设置初始值与类型，空值状态下*ngFor遍历会直接报错。

方案1（推荐）：替换为BehaviorSubject #

BehaviorSubject是RxJS提供的可留存最新值的Subject类型，新订阅者接入时会自动收到当前存储的最新值，完全适配这个场景。
修改todo.service.ts代码：

// 替换导入的Subject为BehaviorSubject
import {BehaviorSubject} from "rxjs"

@Injectable({
  providedIn: 'root'
})
export class TodoService {
  todos:Todo[]=[];
  // 替换Subject定义，设置初始值为空数组
  todoSubject=new BehaviorSubject<Todo[]>([])

  // 其余代码保持不变即可
}

方案2：主动拉取初始值 #

如果不想修改Subject类型，可在todos.component.ts的ngOnInit中先主动拉取服务中存储的todo数组当前值，补充订阅逻辑：
修改todos.component.ts代码：

export class TodoComponent implements OnInit, OnDestroy {
  // 增加类型与初始值，避免空值报错
  todos: Todo[] = [];
  todoSub: Subscription;

  constructor(private todoService:TodoService){}

  ngOnInit():void{
    // 先主动拉取当前最新的todo列表
    this.todos = this.todoService.todos;
    // 原有订阅逻辑保持不变
    this.todoSub=this.todoService.todoSubject.subscribe(
      (value:Todo[])=>{
        this.todos=value;
        console.log("Dans todo value :"+value);
      },
      (error)=>{
        console.log("Erreur "+error)
      },
      ()=>{
        console.log("Observable complete");
      }
    )
  }
  // 其余代码保持不变
}

两种方案任选其一执行后，路由跳转回todos页面即可正常渲染包含新增数据在内的全部todo列表。

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