Angular 2对象未订阅错误
发布时间:2020-12-17 18:09:50 所属栏目:安全 来源:网络整理
导读:我正在开发用于测试Angular 2的小项目,我在登录时遇到了对象未订阅错误. 这是我的LoginComponent: import {Component,OnDestroy} from '@angular/core';import {Router} from '@angular/router';import { Subscription } from 'rxjs/Subscription';import {
我正在开发用于测试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; } } 当我第一次登录时,它工作正常.但是当我注销并尝试再次登录时,它会给我错误: 解决方法
我有一个类似的问题并通过用[hidden]替换* ngIf来“解决”它.
这个解决方案不会从dom中删除元素,这可能是造成取消订阅问题的原因,它只是隐藏了元素. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
推荐文章
站长推荐
热点阅读