角度2の素材2 Firebaseイベントリスナー内で条件セットを設定したときにスナックバーが失敗する

Question

角度材料2ライブラリとFirebaseライブラリを併用すると奇妙な問題が発生します。

import {Component, ChangeDetectorRef} from '@angular/core'; 
import {MdSnackBar} from '@angular/material'; 
declare const firebase: any; // declare the firebase global variable so Typescipt doesn't complain 

@Component({ 
    selector: 'app-root', 
    template: ` 
    <button *ngIf="test" (click)="failedAttempt()">Click me</button> 
    `, 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 
    test = false; 
    constructor(private ref: ChangeDetectorRef, private snackBar: MdSnackBar) { 
    firebase.auth().onAuthStateChanged((user) => { 
     this.test = true; 
     this.ref.detectChanges(); 
    }); 
    } 
    failedAttempt() { 
    this.snackBar.open('It didn\'t quite work!', 'Try Again', {duration: 2000}); 
    } 

私はボタンをクリックすると、スナックバーが表示されない：ここでは

コードがあります。エラーはスローされず、オブジェクトを検査することによってわかることから、スナークバーはそれが表示されていると思います。

testのデフォルト値はtrueです。

は、私が追加した場合：

は

setInterval(()=> this.ref.detectChanges(), 1000)

firebase.auth()...イベントリスナーの前に、それは動作します - しかし、私は明らかに常に動作していることを望んでいません。

誰でも手伝ってもらえますか？

Answer 1

これはAngular 2 Gitterチャンネルで回答されましたが、他のユーザーの利益のためにここで再現しています。 @jordicから

：ゾーン外

---

firebaseクライアントlibに実行するすべての非同期操作。問題を解決するには、2つの方法：angularfire2を使用するかのように、ゾーンにfirebase認証状態からのコールバックをラップ：

import {NgZone} from '@angular/core' 

// inject in on service constructor 

firebase.auth().onAuthStateChanged((user) => this.zone.run(() => { 
    // this will put firebase call back inside angular zone. 
})) 

私は喜んで、ウィンドウ上にあるために必要なFirebaseオブジェクトとしてAngularFire2を使用することができませんでした

---

オブジェクトではなく、ゾーン内のラッピングがうまくいった。このため

公式ドキュメントはここにある：https://angular.io/docs/ts/latest/api/core/index/NgZone-class.html

はさらに読書の束はここから始まるもあります： https://blog.thoughtram.io/angular/2016/01/22/understanding-zones.html

あまりにも実際にそこにあるとしてうまくいけば、このブログは、いつでもすぐに死にません要約すると非常に素晴らしい情報。