错误类型错误：无法读取未定义的属性'openDialogTEST'

Question

我试图使一个对话框弹出每当我得到一个错误从myerrorhandler我可以看到console.error（this.explanation）调用，但不是this.dialogbox.openDialogTEST（）；

这是我的错误消息。

错误类型错误：无法读取未定义的属性'openDialogTEST'

奇怪的是，如果我用按钮调用它，一切都很好。这是我的课程：

usertable.component.ts

  connect(): Observable<Installation[]> {

    return this.authservice.GetInstallation();
  }

auth.service.ts

  GetInstallation(): Observable<Installation[]> {
    return this.GetServiceProviderId().pipe(
      flatMap(info => {
        return this.http.get<Installation[]>
          (this.rooturl +
          "installation/?serviceproviderid=" +
          info.ServiceProviderId,
          { headers: this.reqHeader })
      }),
       catchError(this.myerrorhandle.handleError)
    )
  }

myerrorHandle.ts

 handleError(errorResponse: HttpErrorResponse) {

    switch (errorResponse.status) {
      case 401: {
        console.error(errorResponse.url, errorResponse.status, errorResponse.statusText)
        this.explanation = "The request has not been applied because it lacks valid authentication credentials for the target resource."
        console.error(this.explanation)
        this.dialogbox.openDialogTEST();
        break;
      }

对话框.component.ts

  openDialogTEST(): void {
    const dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
    });

    dialogRef.afterClosed().subscribe(result => {
      console.log("after close")
    });
  }

完整错误消息：

错误类型错误：无法读取未定义的属性'openDialogTEST'node_modules./src/app/_esm5[作为选择器]（node_modules）在_esm5./_esm5/rxjs/_error/内部/运营商/_error（node_modules）在_esm5./Subscriber.js.Subscriber.error/rxjs/Subscriber.js:60/内部/node_modulesInnerSubscriber.push.MergeMapSubscriber.push.（_esm5）在_error./OuterSubscriber.js.OuterSubscriber.notifyError/rxjs/OuterSubscriber.js:13/内部/node_modules（_esm5）在node_modules./Subscriber.js.Subscriber./rxjs/InnerSubscriber.js.InnerSubscriber./内部/_esm5InnerSubscriber.js:18（_error）在node_modules./Subscriber.js.Subscriber.error/rxjs/Subscriber.js:60/内部/_esm5（node_modules）在_esm5./MapSubscriber.push./rxjs/Subscriber.js.Subscriber./内部/node_modulesSubscriber.js:80（Subscriber.js:80）在FilterSubscriber.push../MapSubscriber.push./rxjs/Subscriber.js.Subscriber.error/内部/myerrorHandle.ts:29（CatchSubscriber.push.）在catchError.js.CatchSubscriber.error./Subscriber.js:60/rxjs/FilterSubscriber.push./内部/catchError.js:33（MergeMapSubscriber.push.）在Subscriber.js.Subscriber../Subscriber.js.Subscriber./rxjs/CatchSubscriber.push./内部/Subscriber.js:80myerrorHandle.ts.myerrorHandle.handleError（MergeMapSubscriber.push.）

Answer 1

使用服务来处理这样的对话:

有关更多详细信息，请参考演示

演示

dailogbox.service。ts:

import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { Observable } from 'rxjs';
import { MatDialogRef, MatDialog, MatDialogConfig } from '@angular/material';
import { DialogOverviewExampleDialog } from './dialog-overview-example'

@Injectable()
export class DialogboxopenService {
  constructor(
    private commonModel: MatDialog
  ) { }

  public openmodel(title: string): Observable<boolean> {
    let ModelRef: MatDialogRef<DialogOverviewExampleDialog>;
    ModelRef = this.commonModel.open(DialogOverviewExampleDialog,
      { width: '50%' }
    );
    ModelRef.componentInstance.data = title;
    return ModelRef.afterClosed();
  }
}  

auth.service.ts：

import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { Observable } from 'rxjs';
import { DialogboxopenService } from './dialogboxopen.service';

@Injectable()
export class AuthService {
  constructor(private dailogbox: DialogboxopenService, private http: HttpClient) { }

  signIn() {
    this.http.get('https://urlnotfound/sas').subscribe(response => {
      console.log(response)
    }, (error: HttpErrorResponse) => {
      this.handleError(error);
    })
  }
  handleError(errorResponse: HttpErrorResponse) {
    switch (errorResponse.status) {
      case 0:
        let m1 = `The request has not been applied because url not found status code  ${errorResponse.status}`
        this.dailogbox.openmodel(m1);
        break;

      case 500:
        let m2 = `The request has not been applied because Internal Server Error Status Code : ${errorResponse.status} `
        this.dailogbox.openmodel(m2);
        break;
    }
  }
}