以下是一个示例代码，代码中演示了如何使用Observable和takeWhile操作符来解决该问题：

import { Component, OnDestroy } from '@angular/core';
import { AngularFirestore } from '@angular/fire/firestore';
import { Observable } from 'rxjs/Observable';
import { takeWhile } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  template: `
    

      
{{ item.value }}
    
  `,
})
export class AppComponent implements OnDestroy {
  items: Observable;
  isAlive: boolean = true;

  constructor(private afs: AngularFirestore) {
    this.items = afs.collection('items').valueChanges();

    this.items
      .pipe(takeWhile(() => this.isAlive))
      .subscribe(items => {
        console.log('Items:', items);
      });
  }

  ngOnDestroy() {
    this.isAlive = false;
  }
}

使用takeWhile操作符创建一个'活着”的标志，以确保只有在组件处于活动状态时才会响应Firestore中的项目更改。 在ngOnDestroy钩子中，'isAlive”标志设置为false以停止订阅项更改。