angular - 演示组件输入不响应可观察的切换？

Question

我在这个演示中有两个组件。将ViewComponentobservable 分配给isSelectedBookInCollection$detail 组件，如下所示：

  template: `<bc-book-detail 
                [book]="book" 
                [inCollection]="isSelectedBookInCollection$ | async"
                (add)="toggleCollection()"
                (remove)="toggleCollection()"></bc-book-detail>`,

当我单击addBookToCollection按钮时，isSelectedBookInCollection$observable 会以正确的值触发，但细节组件的@input.

这是一个 stackblitz 演示：

https://stackblitz.com/edit/angular-temp-slice-demo?file=src%2Fapp%2Fbooks%2Fview-book.component.ts

方法：

  toggleCollection() {
    this.bookCollection.toggle(this.book);
    this.isSelectedBookInCollection$.subscribe(v=>console.log(v));
  }

是什么切换isSelectedBookInCollection$可以在控制台中看到的。

任何人都知道为什么输入[inCollection]输入没有被更新？

Stackblitz 与答案

https://stackblitz.com/edit/angular-temp-slice-demo-phase2?file=src/app/books/view-book.component.ts

标签： angulartypescriptrxjs

Answer 1

根据您的代码isSelectedBookInCollection$，只有在获得新值（正在监听 not 的变化）时才会获得activeBook$新值。bookStoreBookCollection