Angularjs   发布时间:2022-04-20  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了Angular 2对象未订阅错误大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在开发用于测试Angular 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;
    }
}

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

Angular 2对象未订阅错误

解决方法

我有一个类似的问题并通过用[hidden]替换* ngIf来“解决”它.

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

大佬总结

以上是大佬教程为你收集整理的Angular 2对象未订阅错误全部内容,希望文章能够帮你解决Angular 2对象未订阅错误所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。