Angular 5异步管道不适用于FirebaseDatabase

Question

我正在尝试使用Angular 5和Firebase （使用angularfire2 ），并尝试观察async管道的行为。

有人说，每当我们将async管道附加到observable时，只要组件被破坏（即ngOnDestroy() ），它将自动unsubscribe订阅。

但是 ，当我将async管道附加到FirebaseDatabase时 ，请参见下面的代码

// This is 'app.component.ts'
import { Component, OnInit, OnDestroy } from '@angular/core';
import { AngularFireDatabase } from 'angularfire2/database';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, OnDestroy {
  $mycourses;

  constructor(private firebaseDB: AngularFireDatabase) {
  }

  ngOnInit() {
    this.$mycourses = this.firebaseDB.list('courses').valueChanges();
  }

  ngOnDestroy() {
    console.log('Component Destroyed');
  }
}

而

// This is 'app.component.html'
<h1>My Current Courses:</h1>
<ul>
  <li *ngFor="let course of $mycourses | async">
    <p class="course">{{ course.COURSE }}</p>
    <span class="course-code"> - {{ course.COURSE_CODE }}</span>
    <span class="au"> - {{ course.AU }}</span>
  </li>
</ul>
<button (click)="ngOnDestroy()">Destroy Component</button>

不会发生预期的行为 ，即单击“ Destroy Component按钮后，每当我在Firebase控制台上修改list和object时，我的组件仍会立即反映数据库中的更改， 而本来是不反映更改的。

我在这里做错了什么？

Answer 1

调用ngOnDestroy不会破坏该组件。

https://angular.io/api/core/OnDestroy ：

销毁指令，管道或服务时调用的生命周期挂钩。

ngOnDestroy回调通常用于销毁实例时需要进行的任何自定义清除。

这意味着您可以在ngOnDestroy函数中进行自定义取消订阅，该函数将在销毁组件时被调用。

如果要测试组件销毁，请创建一个子组件，然后使用模板：

<ng-container *ngIf="existingComponent">
 <child-component></child-component>
<ng-container>
<button (click)="existingComponent = !existingComponent">Create/Destroy</button>