Angular 从组件调用时服务中的 AddTodo 方法不起作用

我有一个TODO应用程序，它使用主题即服务方法来进行状态管理.

我的待办事项服务如下所示

import { Injectable } from '@angular/core';
import { Todo } from './todo.model';
import { HttpClient } from '@angular/common/http';
import { Observable, BehaviorSubject, map, pipe } from 'rxjs';

@Injectable()
export class TodosService {
  private todos$ = new BehaviorSubject<Todo[]>([]);
  constructor(private http: HttpClient) {
    this.http
      .get<Todo[]>('https://jsonplaceholder.typicode.com/users/1/todos')
      .subscribe((todos) => {
        this.todos$.next(todos);
      });
  }

  public getTodos(): Observable<Todo[]> {
    return this.todos$;
  }

  public getCompletedTodos(): Observable<Todo[]> {
    return this.todos$.pipe(
      map((todos) => todos.filter((todo) => todo.completed))
    );
  }

  public addTodo(event: string) {
    const newArray: Todo[] = [
      ...this.todos$.value,
      {
        userId: 1,
        id: this.todos$.value.length,
        title: event,
        completed: false,
      },
    ];
    this.todos$.next(newArray);
  }
}

我的Add-Todo组件如下所示.

import 'zone.js/dist/zone';
import { Component } from '@angular/core';
import { TodosService } from './todo.service';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-add-todo',
  standalone: true,
  imports: [CommonModule, FormsModule],
  providers: [TodosService],
  template: `
    <label>Add Todo</label>
    <input type="text" [(ngModel)]="todo" />
    <button (click)="addNewTodo()">Submit</button>
  `,
})
export class AddTodo {
  todo: string = '';
  constructor(private todoService: TodosService) {}

  addNewTodo() {
    this.todoService.addTodo(this.todo);
    this.todo = '';
  }

  ngOnInit() {}
}

我知道组件正在调用我的addTodo方法，因为我可以通过控制台记录newArray值，并在try 添加新值时看到它.但出于某种原因，我的新待办事项没有展示出来.

更奇怪的是，当我在我的服务的构造函数中调用addTodo时，它工作得很好.这样做时，我的显示待办事项的组件就会正确更新.

  constructor(private http: HttpClient) {
    this.http
      .get<Todo[]>('https://jsonplaceholder.typicode.com/users/1/todos')
      .subscribe((todos) => {
        this.todos$.next(todos);
      });

      setTimeout(()=> {
        this.addTodo('Todo from inside setTimeout')
      }, 3000)
  }

那么，为什么我的list-todo组件在从组件调用addTodo时不更新，而不是在服务本身内部更新呢？

我创造了一个stackblitz demo