Асинхронный канал Angular 5 не работает с FirebaseDatabase - PullRequest
Новая
       5

Асинхронный канал Angular 5 не работает с FirebaseDatabase

0 голосов
/ 30 апреля 2018

Я пытаюсь поэкспериментировать с Angular 5 и Firebase (используя angularfire2) и пытаюсь наблюдать поведение async трубы.

Было указано, что всякий раз, когда мы присоединяем async трубу к observable, она автоматически unsubscribe будет подписываться, когда компонент будет уничтожен (т.е. ngOnDestroy()).

Однако , когда я присоединяю async pipe к 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, всякий раз, когда я изменяю list и object на консоли Firebase, мой компонент по-прежнему немедленно отражает изменения в базе данных, в то время как предполагалось, что изменения не будут отражены.

Что я здесь не так делаю?

1 Ответ

0 голосов
/ 30 апреля 2018

Вызов 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>
...