Угловые 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, что, вероятно, вызывает проблему отмены подписки, она просто скрывает элемент.