javascript – 在/ map等的角度6 / rxjs中输入错误
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了javascript – 在/ map等的角度6 / rxjs中输入错误，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含5126字，纯文字阅读大概需要8分钟。
内容图文
我收到以下错误,尝试更新角度6的解决方案.
ERROR in ../app/AuthService.ts
TS2339: Property 'of' does not exist on type 'typeof Observable'.
ERROR in ../app/AuthService.ts
TS2339: Property 'map' does not exist on type 'Observable<any>'.
ERROR in ../app/AuthService.ts
TS2339: Property 'map' does not exist on type 'Observable<boolean>'.
ERROR in TS2339: Property 'map' does not exist on type 'Observable<any>'.
我使用的是最新版本的rxjs,进口(至少在纸面上)似乎是正确的？
"rxjs": "^6.2.0",
我的文件如下：
import { Injectable } from "@angular/core";
import { NGXLogger } from "ngx-logger";
import { CanActivate, Router } from "@angular/router";
import { HttpClient, HttpHeaders } from "@angular/common/http";
import { Observable } from "rxjs";
import { StorageService } from "./lib/storage/StorageService";
import { map, catchError } from "rxjs/operators";
import { of } from "rxjs";
import * as _ from "lodash";
/**
* class that represents the access token
* returned from /connect/token (IdentityServer 4)
*/
export class Token {
// ReSharper disable once InconsistentNaming
access_token: string;
// the user email.
email: string;
}
@Injectable()
export class AuthService {
/**
* the access token.
*/
token: Token;
constructor(
private readonly http: HttpClient,
private readonly logger: NGXLogger,
private readonly storage: StorageService
) {
}
/**
* return true if the user has a valid token.
*/
isLoggedIn(): Observable<boolean> {
return this
.loadToken()
.map(_ => this.token && this.token.access_token.length > 0)
.catch(e => {
this.logger.debug(e);
this.token = null;
return Observable.of(false);
});
}
logout() {
this.logger.info("logging out");
this.storage.clear("token");
}
/**
* login, using the supplied email and password.
* @param email the email address.
* @param password the password.
*/
login(email: string, password: string): Promise<Token> {
this.logger.info(`user ${email} attempting login`);
const login = {
username: email,
password: password,
grant_type: "password",
scope: "api",
client_id: "api",
client_secret: "secret"
};
const headers: HttpHeaders = new HttpHeaders().set("Content-Type", "application/x-www-form-urlencoded");
const post = this.http.post<Token>(
"connect/token",
this.encodeObjectToParams(login),
{ headers: headers });
return post
.toPromise()
.then((_: Token) => this.token = this.saveToken(_));
}
register(email: string, password: string, confirmPassword: string): Observable<any> {
this.logger.info(`user ${email || "<null>"} registration request`);
const uri = "api/register";
const registration = {
email,
password,
confirmPassword
};
return this.http
.post<any>(
uri,
registration)
.map(_ => _)
.catch(e => {
this.logger.debug(`exception :: ${uri} :: `, e);
return Observable.throw(e.error);
});
}
/**
* encode the supplied object to a set of form variables.
* @param instance the object to encode.
*/
private encodeObjectToParams(instance: any): string {
return Object.keys(instance)
.map(key => encodeURIComponent(key) + "=" + encodeURIComponent(instance[key]))
.join("&");
}
/**
* save the supplied token
*/
private saveToken = (token: Token): Token => this.storage.save("token", token);
/**
* attempt to load the token from local storage,
* and test that it is valid.
*/
private loadToken() {
this.logger.debug("loading 'token'");
const token = this.storage.load<Token>("token");
return this.testToken(token)
.map(_ => this.token = token);
}
/**
* test that the supplied login token works.
* @param token the token to test.
*/
isTokenEmailValid = token => this.http
.get<any>("api/user")
.map((response: any) => response !== null && response.isAuthenticated);
testTokenThrottle = _.throttle(token => {
this.logger.info(`testing token :: ${JSON.stringify(token)}`);
return this.isTokenEmailValid(token);
}, 300000);
private testToken(token: Token): Observable<boolean> {
const valid = this.testTokenThrottle(token) || this.isTokenEmailValid(token);
return valid;
}
}
/**
* Authorisation guard, to ensure that a user
* not logged in is redirected to the login page.
*/
@Injectable()
export class AuthGuard implements CanActivate {
constructor(
private readonly authService: AuthService,
private readonly logger: NGXLogger,
private readonly router: Router) { }
canActivate(): Observable<boolean> {
this.logger.debug("authorisation guard testing login status");
return this.authService.isLoggedIn().map(_ => {
this.logger.info(`authorisation guard :: login status ${_}`);
if (_)
return true;
this.router.navigate(["login"]);
return false;
}).catch(_ => {
this.logger.info(`authorisation guard :: login error ${_}`);
this.router.navigate(["login"]);
return Observable.of(false);
});
}
}
解决方法:
从RxJs 6.0开始,您将使用pipe()运算符,该运算符将使用其他将应用Observable的运算符.
类型’Observable< any>‘上的错误消息属性’map’不存在有意义,Observable中不存在map.
你不能链接Observable.map(…).catch(…).
新语法是Observable.pipe(map(…),catchError(…))
例：
import { map, catchError } from "rxjs/operators";
import { of } from "rxjs";
isLoggedIn(): Observable<boolean> {
return this
.loadToken()
.pipe(
map(_ => this.token && this.token.access_token.length > 0),
catchError(e => {
this.logger.debug(e);
this.token = null;
return of(false);
})
)
}
一个参考：https://www.academind.com/learn/javascript/rxjs-6-what-changed/#operators-update-path
内容总结
以上是互联网集市为您收集整理的javascript – 在/ map等的角度6 / rxjs中输入错误全部内容，希望文章能够帮你解决javascript – 在/ map等的角度6 / rxjs中输入错误所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】