“rxjs/operators”和“rxjs/add/operator/”之间有什么区别?

Ste*_*ane 4 rxjs typescript angular

import { map } from 'rxjs/operators';和 和有什么区别import 'rxjs/add/operator/map';

我在进行登录的服务方法中使用它:

// import { map } from 'rxjs/operators'; // Fails at runtime
import 'rxjs/add/operator/map'; // Works fine at runtime

  public login(username: string, password: string): Observable<any> {
    console.log('Sending the login credentials to obtain a token');
    const credentials = { 'email': username, 'password': password };
    return this.httpService.postWithHeadersInResponse(URI_LOGIN, credentials)
      .map((response: HttpResponse<any>) => {
        const header = response.headers.get(this.authService.getHeaderName());
        const token = this.authService.extractTokenFromHeader(header);
        console.log('The token from the response header: ' + token);
        this.authService.setJwtTokenToLocalStorage(token);
      });
  }
Run Code Online (Sandbox Code Playgroud)

iof*_*sli 6

不同之处在于,当您使用rxjs/add/operator/map它时,会更改 Observable 的原型,因此您可以使用.(点)运算符进行链接:

this.httpService.postWithHeadersInResponse(URI_LOGIN, credentials)
  .map(...);
Run Code Online (Sandbox Code Playgroud)

但这种使用运算符的方式已被弃用。当前方式rxjs/operators

import { map } from 'rxjs/operators';
this.httpService.postWithHeadersInResponse(URI_LOGIN, credentials)
  .pipe(map(...));
Run Code Online (Sandbox Code Playgroud)