Блог

В настоящее время я работаю над пользовательским интерфейсом, который проверял бы статус http для 404, а затем открывал модальный, который давал бы указания о том, что делать.

Это мой код: sign-form.component.html

 <div class="modal">
        <pal-modal>
            <div slot="header">
                <h3>Penny Product</h3>
            </div>
            <div slot="body">
                This product is no longer eligible for sale. Remove the product from the salesfloor.</div>
            <div slot="footer">
                <pal-button type="secondary" size="small"> Close </pal-button>
            </div>
        </pal-modal>

    </div>
  

Это мой sign-form.component.ts

 import { Component, OnInit } from '@angular/core';
import { Sign }    from '../sign';
import { environment } from './../../environments/environment';
import { ActivatedRoute, ParamMap } from '@angular/router';
import {HttpClient, HttpClientModule, HttpErrorResponse} from '@angular/common/http';
import {error} from '@angular/compiler/src/util';
import {tryCatch} from 'rxjs/internal-compatibility';

@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('', '');

  ngOnInit() {
  }

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

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

    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, '', '');
  }

}
  

может кто-нибудь помочь мне в этом? я действительно просто хочу написать код, чтобы убедиться, что модальное всплывающее окно оформлено правильно, прежде чем переходить к проверке статуса http. Я устал от разных вещей, но, похоже, просто не могу заставить его всплывать. Любая помощь будет оценена.

Я бы предпочел использовать компонент mat-dialog. Поскольку это дает вам все, что вам нужно для отображения всплывающего окна, и вы можете просто сосредоточиться на реальной бизнес-логике. Пожалуйста, следуйте моему примеру stackblitz: https://stackblitz.com/edit/angular-mat-dialog-kfdktu

Пожалуйста, подумайте о принятии ответа, если это поможет 🙂