2016-10-13 42 views
5

Ben Eğik 2 ile test etmek için küçük bir proje geliştiriyorum ve Giriş yaparken ben abonelikten hata nesne var BuradaEğik 2 nesne abonelikten hata

benim LoginComponent geçerli:

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(); 
    } 
} 

Ve işte benim AuthService geçerli:

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; 
    } 
} 

İlk kez giriş yaptığımda, iyi çalışıyor. ancak oturum açıp tekrar oturum açmaya çalıştığımda, bana şu hataları verir: enter image description here

cevap

1

Benzer bir sorunla karşılaştım ve * ngIf'yi [gizli] ile değiştirerek "çözdüm".

Bu çözüm, elemanın, abonelikten çıkmasına neden olan soruna neden olan dom'dan kaldırılmaz, yalnızca öğeyi gizler.

+0

Cevabınız için teşekkür ederiz. Ama [gizli] kullanmaktan kaçınmak istedim. Çünkü [gizli], önemli ölçüde kullanırken, Açısal bu stili kontrol eder ve bu öğe üzerinde ayarlanmış olan diğer görüntü stillerini her zaman geçersiz kılmak için "! Önemli" ile birlikte gönderir. Kaynak: [http://angularjs.blogspot.com/2016/04/5-rookie-mistakes-to-avoid-with-angular.html](http://angularjs.blogspot.com/2016/04/5- acemi-hatalar-için-kaçınmak-ile-angular.html) –