时间戳

首页 > 解决方案 > 在 Angular 6 的弹出模式中显示来自服务器的响应消息的问题

javascript - 在 Angular 6 的弹出模式中显示来自服务器的响应消息的问题

问题描述

我在一个角度组件内创建了两个自定义对话框模式。我的目标是打开正确的模式并显示响应消息。

Observable从我的服务中接收两个值的组件：

  1. 需要打开的modal-name
  2. 从服务器返回的响应消息

由于某种原因，组件仅在第一次打开其中一个模式时才显示消息，尽管它在控制台中显示正确分配的值（模式工作正常）。

任何解决此问题的帮助将不胜感激

组件 T

 import { Component, OnInit } from '@angular/core';
    import { Subscription } from 'rxjs';
    import { ShowHallService } from '../../admin-panel/admin-services/show-Hall.service';
    import { AlertModalService } from '../alert-modal.service';
    import { AdminMovieService } from '../../admin-panel/admin-services/admin-movie.service';
    import { ShowService } from '../../admin-panel/admin-services/shows.service';
    import { Router } from '@angular/router';

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


     private showHallModalSub: Subscription;
     private responseMessage: string;


      constructor(private modalService: AlertModalService,
                  private showHallService: ShowHallService,
                  private movieService: AdminMovieService,
                  private showService: ShowService,
                  private router: Router) { }


      ngOnInit() {
         this.showHallModalSub = this.showHallService.getAlertModalInfo().subscribe((response) => {  
          this.responseMessage = response.message  
          this.openModal(response.modalName)   
        })

        this.showHallModalSub = this.movieService.getAlertModalInfo().subscribe((response) => {
         this.responseMessage = response.message 
         this.openModal(response.modalName)     
        })
      }


      // Modal function - getting the info about which modal needs to be open 
      openModal(modalName:string){
        this.modalService.open(modalName);
        setTimeout(() => {
          if(modalName === 'success-modal'){
            this.modalService.close(modalName);
             this.router.navigate(["/admin"])
          }
          this.modalService.close(modalName);
        }, 2000);
      }


      ngOnDestroy(): void {
          this.showHallModalSub.unsubscribe();
      }
    }

组件HTML

<!-- Success Modal -->
  <alert-modal id="success-modal">
    <div class="success-modal">
      <div class="success-modal__circle">
        <div class="success-modal__icon"><i class="fa fa-check"></i></div>
      </div>
      <div class="success-modal__body">
        <h3 class="success-modal__main-text">Success!</h3>
        <p class="success-modal__sub-text">{{responseMessage}}</p>
      </div>
      <!-- Optional -->
      <div class="success-modal__btn">
      </div>
    </div>
  </alert-modal>
  <!--  End success Modal -->




  <!-- fail Modal -->
  <alert-modal id="fail-modal">
    <div class="fail-modal">
      <div class="fail-modal__circle">
        <div class="fail-modal__icon"><i class="fa fa-times"></i></div>
      </div>
      <div class="fail-modal__body">
        <h3 class="fail-modal__main-text">Failed!</h3>
        <p class="fail-modal__sub-text">{{responseMessage}}</p>
      </div>
      <!-- Optional -->
      <div class="fail-modal__btn">
      </div>
    </div>
  </alert-modal>
  <!--End fail Modal -->

标签： javascriptangular

解决方案

块引用

安装 jQuery

添加内部组件：

 declare var $: any;

之后，您可以通过添加此服务 Observable 轻松地使用 jquery 代码打开模式。

$("#myModal").modal('show');

推荐阅读