大佬教程收集整理的这篇文章主要介绍了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对象未订阅错误全部内容,希望文章能够帮你解决Angular 2对象未订阅错误所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。