각도 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에서 요소를 제거하지 않습니다. 이는 아마도 가입 취소 문제를 일으키는 요소 일 뿐이며 단순히 요소를 숨기 만합니다.