Angular2 & AngularFire2은 -의 재산 '인증'을 읽을 수 없습니다 널

Question

구성 요소 :

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. 수명주기 후크 OnDestroy()의 모든 구독을 취소하는 것이 좋은 습관입니다.