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 :

Lifecycle hook that is called when a directive, pipe or service is destroyed.

ngOnDestroy callback is typically used for any custom cleanup that needs to occur when the instance is destroyed.

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

如果要测试组件销毁，请创建子组件并使用模板：

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

Angular 5 异步管道不适用于 FirebaseDatabase

Angular 5 async pipe doesn't work with FirebaseDatabase

javascript

firebase

firebase-realtime-database

angularfire2

angular