角度2オブジェクト解除エラー

Question

私は角2とテストのための小規模なプロジェクトを開発していますし、ログインしながら、私が退会し、エラーオブジェクトしまった

ここでは私のLoginComponentです：

import {Component, OnDestroy} from '@angular/core'; 
import {Router} from '@angular/router'; 
import { Subscription } from 'rxjs/Subscription'; 
import {Location} from '@angular/common'; 


import {AuthService} from './services/auth.service'; 
import {RoutingService} from './services/routing.service'; 

import {ToastyService, ToastyConfig, ToastOptions, ToastData} from 'ng2-toasty'; 

import {LoadingBarModule, LoadingBarService} from 'ng2-loading-bar'; 


@Component({ 
    selector: 'login', 
    template: ` 
       <loading-bar color="#FF0000" [height]="3" [animationTime]="0.3" [runInterval]="100" [progress]="0"></loading-bar> 
       <h3> {{'LOGIN' | translate }} </h3> 
       <p> {{Message}} </p> 

       <div *ngIf="!authService.isLoggedIn"> 
        <input [(ngModel)]="username" placeholder="{{'USERNAME' | translate}}" /><br /> 
        <input type="password" [(ngModel)]="password" placeholder="{{'PASSWORD' | translate}}" /> 
       </div> 
       <div> 
        <button (click)="login()" *ngIf="!authService.isLoggedIn">{{'LOGIN' | translate }}</button> 
       </div> 

       <label class="label label-danger">{{errorMessage}}</label> 

       <ng2-toasty [position]="'top-center'"></ng2-toasty> 
       ` 
}) 

export class LoginComponent implements OnDestroy { 
    username: string; 
    password: string; 
    subscription: Subscription; 

    constructor(private authService: AuthService, private router: Router, private toastyService: ToastyService, private toastyConfig: ToastyConfig, private loadingBarService: LoadingBarService, private routingService: RoutingService, private location:Location) { 
     this.toastyConfig.theme = 'material'; 
    } 

    login() { 

     this.loadingBarService.start(); 

     this.subscription = this.authService.login(this.username, this.password).subscribe(() => { 

      if (this.authService.isLoggedIn) { 
       this.toastyService.default('Hi'); 

       this.routingService.logged = false; 

       let redirect = this.authService.redirectUrl ? this.authService.redirectUrl : this.routingService.lang + '/apphomecomponent'; 

       this.router.navigate([redirect]); 
      } 
      else { 
       this.toastyService.default('Login failed'); 
      } 
     }); 
    } 

    ngOnDestroy() { 
     this.subscription.unsubscribe(); 
    } 
} 

そして、ここでは私のAuthServiceです。

import {Injectable} from '@angular/core'; 

import {Observable} from 'rxjs/Observable'; 
import 'rxjs/add/observable/of'; 
import 'rxjs/add/operator/do'; 
import 'rxjs/add/operator/delay'; 



@Injectable() 
export class AuthService { 
    isLoggedIn: boolean = false; 

    redirectUrl: string; 

    login(username: string, password: string): Observable<boolean> { 
     if (username === 'test' && password === 'test') { 
      return Observable.of(true).delay(1000).do(val => this.isLoggedIn = true); 
     } 
     else { 
      return Observable.of(false).delay(1000).do(val => this.isLoggedIn = false); 
     } 
    } 

    logout(): void { 
     this.isLoggedIn = false; 
    } 
} 

初めてログインすると正常に動作します。ログアウトして再度ログインしようとすると、エラーが発生する：

Answer 1

私は同様の問題があり、* ngIfを[hidden]に置き換えて解決しました。

このソリューションは、DOMから要素を削除しません。これはおそらく、サブスクライブ解除の問題を引き起こしているだけで、単に要素を非表示にします。