Angular2＆AngularFire2 - ヌル

Question

コンポーネントのプロパティを読み取ることができません「AUTH」：

import { Component, OnInit } from '@angular/core'; 
import { AngularFire, FirebaseObjectObservable } from 'angularfire2'; 
import { Router } from '@angular/router'; 

@Component({ 
    selector: 'app-header', 
    templateUrl: './app-header.component.html', 
    styleUrls: ['./app-header.component.css'] 
}) 

export class AppHeaderComponent implements OnInit { 
    isLoggedIn: any; 
    userEmail: any; 
    email: string; 
    item: FirebaseObjectObservable<any>; 

    constructor(public af: AngularFire, private router: Router) { 
    var auth = this.af.auth.subscribe((user) => { 
     if (user) { 
     this.isLoggedIn = true; 
     this.userEmail = this.af.auth.subscribe(auth => { 
      this.email = auth.auth.email; 
      this.item = af.database.object('/users/'+ auth.auth.uid); 
      console.log(this.email); 
     }); 
     } else { 
     this.isLoggedIn = false; 
     } 
    }); 

    } 

    logout() { 
    this.af.auth.logout(); 
    this.router.navigate(['login']); 
    } 

    ngOnInit() { 

    } 

} 

すべてが完璧に動作しますが、logout()関数が呼び出されたときに、私はコンソールで次のエラーを取得すると、私はように見えることはできませんそれを修正するために管理：

TypeError: Cannot read property 'auth' of null 

何も私の知る限り壊れませんが、私はこのすべてを学習にかなり新しいですし、可能な限り自分のコードをクリーンアップしたいと思います。ありがとうございました。

編集：追加HTML

<nav class="navbar navbar-inverse bg-inverse navbar-toggleable-md"> 
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#containerNavbar" aria-controls="containerNavbar" aria-expanded="false" aria-label="Toggle navigation"> 
    <span class="navbar-toggler-icon"></span> 
    </button> 

    <div class="collapse navbar-collapse"> 
    <ul class="navbar-nav mr-auto"> 
     <li class="nav-item" 
      [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}"> 
     <a class="nav-link" routerLink="/">Home <span class="sr-only">(current)</span></a> 
     </li> 
     <li class="nav-item" 
      [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}"> 
     <a class="nav-link" routerLink="/about">About</a> 
     </li> 
    </ul> 
    <div class=""> 
     <ul class="navbar-nav mr-auto"> 
     <li class="nav-item" 
      [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}"> 
      <a class="nav-link" routerLink="/login" *ngIf="!isLoggedIn">Login</a> 
     </li> 
     <li class="nav-item" 
      [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}"> 
      <a class="nav-link" routerLink="/register" *ngIf="!isLoggedIn">Register</a> 
     </li> 
     <li class="nav-item dropdown" *ngIf="isLoggedIn"> 
      <a class="nav-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
      {{ (item | async)?.battleTag }} 
      </a> 
      <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> 
      <a class="dropdown-item" routerLink="/profile">Profile</a> 
      <a class="dropdown-item">Settings</a> 
      <a class="dropdown-item" (click)="logoutModal.show()">Logout</a> 
      </div> 
     </li> 
     </ul> 
    </div> 
    </div> 
</nav> 

<div class="modal fade" bsModal #logoutModal="bs-modal" [config]="{backdrop: 'static'}" 
    tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true"> 
    <div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <h5 class="modal-title">Logout</h5> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="logoutModal.hide()"> 
      <span aria-hidden="true">&times;</span> 
     </button> 
     </div> 
     <div class="modal-body"> 
     <p>Are you sure you want to logout?</p> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-primary" (click)="logout();logoutModal.hide()">Logout</button> 
     <button type="button" class="btn btn-secondary" (click)="logoutModal.hide()">Cancel</button> 
     </div> 
    </div> 
    </div> 
</div> 

Answer 1

あなたはこのエラーを回避するためにfirebase authからの退会する必要があります。

import { Subscription } from 'rx/js'; 

export class AppHeaderComponent implements OnInit { 

authSubscription: Subscription; 

    onInit() { 
    this.authSubscription = this.af.auth.subscribe((user) => { 
    .... 
    } 

    logout() { 
    this.af.auth.logout(); 
    this.router.navigate(['login']); 
    this.authSubscription.unsubscribe(); 
    } 
} 

P.S.ライフサイクルのフックOnDestroy()のすべての購読を購読解除するのは良いハビットです。