Question

我正在使用角材料。我正在处理 service.ts 文件中的handleError方法中的常见错误响应。当我收到错误而不是来自 service.ts 文件的警告时，我想弹出材料对话框。

我该如何实现？

我是角质材料的新手。

代码：

export class CommonService {
  public api = 'https://URl'
  public showSpinner: boolean = false;
  public auth: boolean = false;
  public fetch: boolean = false;

  constructor(public http: Http) { }

  postCall() {
    this.showSpinner = false;
    this.auth = false;
    this.fetch = false;

    var header = {
      "headers": {
        "content-type": "application/x-www-form-urlencoded",
      }, "grant_type": "password",
      "scope": "user",
      "client_id": "4874eafd0f7a240625e59b2b123a142a669923d5b0d31ae8743f6780a95187f5",
      "client_secret": "908f6aee4d4cb27782ba55ae0c814bf43419f3220d696206212a29fe3a05cd88",
      "auth_token": "azd4jXWWLagyb9KzgfDJ"
    };
    return this.http.post(this.api + '/oauth/token.json', header)
      .map(response => {
        this.showSpinner = true;
        this.auth = true;
        this.fetch = false;

        setTimeout(function () {
          let result = response.json();
          window.localStorage.setItem('access_token', result.access_token);
        }, 4000);

        return true;
      })
      .catch(this.handleError)
  }


  getCaseStudy() {
    this.showSpinner = true;
    this.auth = false;
    this.fetch = true;

    let headers = new Headers();
    let token = window.localStorage.getItem('access_token');
    headers.append('Authorization', 'Bearer ' + token);
    headers.append('content-type', 'application/json');

    let Hdata = new RequestOptions({ headers: headers })

    return this.http.get(this.api + '/upend URl', Hdata)
      .map(response => {
        this.showSpinner = false;
        this.fetch = false;
        this.auth = false;
        return response.json()
      })
      .catch(this.handleError);
  }

  private handleError() {
    return Observable.throw(
      alert('problem somewhere')
    )
  }

}

提前致谢。

Answer 1

您可以创建一个位于根级别的组件ErrorDialog。在AppComponent中订阅CommonService中声明的将提供布尔值的主题。

在CommonService中，您可以这样做：

private subject = new Subject<any>();

updateDialog(isVisible: boolean) {
    this.subject.next({ isVisible: isVisible });
}

getDialogVisibility(): Observable<any> {
    return this.subject.asObservable();
}

handleError(error: any) {
    ...
    this.updateDialog(true);
    ...
}

在您的组件订阅getDialogVisibility中，每当从服务更改值时，您都可以了解是否应显示对话框。

<强> AppComponent

@Component({
  selector: 'app-root',
  template:`
        <router-outlet></router-outlet>
        <error-dialog></error-dialog>
    `
})
export class AppComponent implements OnDestroy {
    subscription: Subscription;
    constructor(private commonService: CommonService) {
        this.subscription = this.commonService.getDialogVisibility().subscribe(isVisible => { 
            if(isVisible) {
                openErrorDialog();
            }
        });
    }

    ngOnDestroy() {
        // unsubscribe to ensure no memory leaks
        this.subscription.unsubscribe();
    }

    openErrorDialog() {
        // write your code
    }
}

从service.ts文件中调用材料对话框作为警报

1 个答案: