Question

问题：

我有一个拦截器：

@Injectable()
export class AuthInterceptor implements HttpInterceptor {

  constructor(private injector: Injector, private router: Router) {
  }


  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    const auth = this.injector.get(AuthenticationService);
    const authHeaders = auth.getAuthHeader();
    const authReq = request.clone({headers: authHeaders});

     return next.handle(authReq).do((event: HttpEvent<any>) => {
       if (event instanceof HttpResponse) {

       }
     }, (err: any) => {
       if (err instanceof HttpErrorResponse) {
         if (err.status === 403) {
           this.router.navigate(['login']);
         }
       }
     });
  }
}

它已经在Angular 5中磨损了，但是现在我已经迁移到了6，这已经不再适用了。

它说财产＆＃39;做＆＃39;在Observable类型中不存在。

我也试图从这个帖子中实现解决方案：LINK 没有工作。

这topic表示这是rxjs更改的结果。在进行建议的更改之后，问题仍然存在（现在使用＆＃39;点击＆＃39;而不是＆＃39;做＆＃39;）

这是导入部分：

// import {Observable} from "rxjs/Observable";
import {Observable} from "rxjs/Rx";
import { tap } from 'rxjs/operators';

注意：已经尝试了注释行。

Answer 1

为了使我的项目（Angular 6，RxJS 6）正常工作，我必须做出以下更改：

import { Injectable } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor, HttpResponse, HttpErrorResponse } from '@angular/common/http';
import { Observable } from 'rxjs';
import { tap } from 'rxjs/operators';
import { Router } from '@angular/router';

并将上面的代码段修改为：

（链接改为管道，并改变了＆＃39;做＆＃39;点击＆＃39;）

@Injectable()
export class AuthInterceptor implements HttpInterceptor {

  constructor(private injector: Injector, private router: Router) {
  }


  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    const auth = this.injector.get(AuthenticationService);
    const authHeaders = auth.getAuthHeader();
    const authReq = request.clone({headers: authHeaders});

     return next.handle(authReq).pipe(
       tap((event: HttpEvent<any>) => {
         if (event instanceof HttpResponse) {

         }
       }, (err: any) => {
         if (err instanceof HttpErrorResponse) {
           if (err.status === 403) {
             this.router.navigate(['login']);
           }
         }
       })
   );
  }
}

原因是一些recent changes in RxJS 6。

使用管道而不是链接作为新的运算符语法。一个操作员的结果通过管道输送到另一个操作员。

和

注意由于与JavaScript保留字的名称冲突，某些运算符的名称发生了变化！这些包括：do - ＆gt;点击，抓住 - ＆gt; catchError，switch - ＆gt; switchAll，最后 - ＆gt;完成。

Answer 2

如果您的错误为property 'do' doesn't exist on type Observable，请尝试导入运营商。把它放在你的文件之上：

import 'rxjs/add/operator/do';

Answer 3

面对同样的问题，这是我解决的方法

ng update（更新所有包并使其与angular 6兼容）
npm install rxjs-compat @ 6 --save（安装rxjs的更新版本）
在整个代码中替换以下函数，因为它们在rxjs中更新

do =＆gt;挖掘， catch =＆gt; catchError， switch =＆gt; switchAll， finally =＆gt;完成

有关更多信息，请查看rxjs change-log。

Answer 4

<强> SOLUTION：

运行'npm install rxjs-compat @ 6 --save';
导入应如下所示：

import {Observable} from 'rxjs';

import 'rxjs/add/operator/do';

在我的情况下， NO NEED 更改'do' - ＆gt; '抽头';
如果使用了角度材料，则在运行第一个命令后可能需要重新安装。

Angular 6使用新的RxJS处理403响应

4 个答案: