Warum wird mein BehaviorSubject aktualisiert, wenn ich den neuen Wert nicht an die next()-Methode übergebe?

Question

Ich versuche, mit RXJS eine einfache TODO-Anwendung zu erstellen. Ich habe eine JSON-Server-Mock-Datenbank mit TODO-Aufgaben. Also landete ich bei diesem TasksService: @Injectable({providedIn:'root'})exportclassTasksService{private_tasks:ITask[]=[];private_tasks$:BehaviorSubject<ITask[]&g

P粉080643975 · Answer

据我了解，这段代码有两个问题。首先，您不知道为什么控制台日志有重复。其次，即使您没有对行为主题调用“.next()”，您也不知道为什么视图会更新。

让我们从第一个开始。

您需要了解 rxjs observables 和 BehaviourSubjects 是如何工作的。普通的可观察对象，当您订阅它时，将等待发出某个值，然后每次发生时，它都会调用您附加到它的操作。例如：

exampleSubject = new Subject();

ngOnInit(): void {
    this.exampleSubject.pipe(
        tap(console.log)
    ).subscribe();
}

emitValue() {
    this.exampleSubject.next("text");
}

现在请注意，在这段代码中，我们仅在 ngOnInit 中订阅了一次。尽管如此，每次调用emitValue()方法（例如从按钮）时，console.log都会被调用。这是因为订阅会一直持续到取消订阅为止。这意味着，每次对主题调用 next() 时都会调用该操作。

那么当您订阅多次时会发生什么？让我们尝试一下：

exampleSubject = new Subject();

ngOnInit(): void {
    subscribeToSubject(); // 1st
    subscribeToSubject(); // 2nd
    subscribeToSubject(); // 3rd
    this.emitValue();
}

emitValue() {
    this.exampleSubject.next("text");
}

subscribeToSubject() {
    this.exampleSubject.pipe(
        tap(console.log)
    ).subscribe();
}

我们订阅了一个主题 3 次，现在每当发出值时，控制台日志都会被调用 3 次。您创建的每个订阅都会调用它。

现在，当我们查看您的示例时，每次单击 addTask 按钮时都会添加订阅。这就是为什么每次添加任务时，都会多一个控制台日志。但是，嘿，在您的第一个示例中，当您删除 .next() 时，您有一些控制台日志，即使您没有发出任何值，这是为什么呢？现在我们来到BehaviourSubject。这是一种特殊的主题，它拥有其价值，并在订阅后立即发出它。而且每次你调用 .next() 时它也会发出，但你没有这样做，所以这就是为什么它每次订阅时都会调用 1 个控制台日志。

你应该做的是打电话

this.tasks.pipe(tap((value) => console.log(value)
)).subscribe();

仅一次，例如在 ngOnInit() 中

好了，现在我们进入第二期

这非常简单，但需要一些关于引用如何工作的知识。

在您的服务中，您将整个任务数组放入 BehaviourSubject 中。事实上，这个主题持有这个数组的引用。这意味着，每当您将新值推送到数组中时，BehaviourSubject 也会拥有它。这就是发生的情况，每当您调用 addTask 方法时，都会将新值推送到任务数组，并且您的 BehaviourSubject 也有它。