Angular 2对象取消订阅错误 [英] Angular 2 object unsubscribed error

问题描述

我正在开发一个用于使用Angular 2进行测试的小项目，并且在登录时遇到对象未订阅的错误.

I am developing small project for testing with Angular 2 and I got object unsubscribed error while logging in.

这是我的LoginComponent:

Here is my 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:

And here is my 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;
    }
}

当我第一次登录时，它工作正常.但是当我注销并尝试再次登录时，它给了我错误:

When I log in first time, it works fine. but when I logout and trying to log in again, it gives me errors:

推荐答案

我遇到了类似的问题，并通过将* ngIf替换为[hidden]来解决"了.

I had a similar issue and "solved" it by replacing the *ngIf with [hidden].

此解决方案不会从dom中删除元素，这可能是导致取消订阅问题的原因，它只是隐藏了元素.

This solution does not remove the element from the dom, which is probably what is causing the unsubscribing issue, it merely hides the element.

这篇关于Angular 2对象取消订阅错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！