angular - 如何拨打电话，如果api返回错误404，将打开模态

Question

我首先尝试验证 url 是否正确。如果是，它将从 url 返回一个符号。如果它返回错误 404，我希望它打开已经建立的模式告诉用户该做什么。

我正在使用 Angular 编写代码。我不完全确定如何做到这一点。

这是我在 sign-form.component.ts 中的内容：

import {Sign} from '../sign';
import {environment} from './../../environments/environment';
import {ActivatedRoute, ParamMap} from '@angular/router';
import {PalModal} from '@pallet/angular';


@Component({
  selector: 'app-sign-form',
  templateUrl: './sign-form.component.html',
  styleUrls: ['./sign-form.component.scss']
})
export class SignFormComponent implements OnInit {

  constructor(private route: ActivatedRoute) {
    this.getStoreNumber();
  }

  submitted = false;

  model = new Sign('', '');


  @ViewChild('modalId', {static: false}) myModal: PalModal;





  ngOnInit() {


  }

  getStoreNumber() {
    this.route.queryParamMap.subscribe(
        (params: ParamMap) => {
          this.model.store = params.get('store');
        }
    )
  }

  getSign() {
    this.submitted = true;
    const sign = this.model;

    this.myModal.open();


    const STORE_REGEXP = /^-?\d{3,4}$/;
    const PRODUCTID_REGEXP = /^[-0-9a-zA-Z]+$/;

    if (!sign.store
        || !sign.productId
        || !STORE_REGEXP.test( sign.store )
        || !PRODUCTID_REGEXP.test( sign.productId )) {
      return;
    }

    const store = sign.store.length === 3 ? '0' + sign.store : sign.store;
    let productId = sign.productId.toUpperCase();
    const SKU_REGEXP = /^[-0-9]+$/;
    let productType;
    if (SKU_REGEXP.test( productId )) {
      productType = 'sku';
      productId = productId.split( '-' ).join( '' );
    } else {
      productType = 'model';
    }



    const url = environment.digitalSignageServiceUri + '/ESL/pdf/store/' + store + '/' + productType + '/' + productId;
    window.open(url, '', '');

  }

  onClick() {
    this.myModal.close();
  }
}

标签： angularmodal-dialog

Answer 1

您可以使用HttpInterceptor拦截请求并打开模式。

 intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(request).pipe(
      tap(
        () => { },
        (error: any) => {
          if (error instanceof HttpErrorResponse) {
            if (error.status === 404) {
             //open modal
            }
          }
        }
      )
    );
  }