Question

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

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

需要打开的模态名称
从服务器返回的响应消息

出于某种原因，该组件仅在其中一个模态首次打开时才显示消息，尽管它在控制台中显示了正确分配的值（模态运行良好）。

任何帮助解决此问题的人都会感激

组件Ts

 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();
      }
    }

Connpoennt 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 -->

Answer 1

好的。问题是我在Dom中同时打开了另一个组件的HTML内的模式模板。

Answer 2

Blockquote

安装jQuery

添加内部组件

 declare var $: any;

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

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

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

2 个答案: