从 angular 组件关闭模态 window

Question

我需要在成功录制后从 angular 组件关闭我的模式 window；但是代码对我不起作用；我该怎么办？

Angular CLI: 6.0.8
Node: 10.16.3
OS: win32 x64

--exp.component.html

  <div class="modal fade bd-example-modal-lg" id="modalExperience" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="myExtraLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">

--exp.component.ts

import { Component, OnInit, Injectable, Inject, ElementRef } from '@angular/core';
import Swal from 'sweetalert2';

private element: any;
constructor(
    private el: ElementRef, @Inject('BASE_URL') baseUrl: string
) {
    this.url = baseUrl;
    this.element = el.nativeElement;
}
Swal.fire({
    title: 'Great',
    html: res.mensaje,
    type: 'success'
}).then((result) = > {
    if (result.value) {
        //close modal -- it does not work
        this.element.style.display = 'none';
        document.body.classList.remove('modalExperience');
    }
});

使用此代码，所有 windows 都已关闭，我看到它影响了组件的选择器，模态框的暗影仍然存在。请告诉我什么是正确的方法！

Answer 1

您需要调用 .close() sweetalert 弹出窗口的方法才能关闭对话框。例如-

Swal.fire({
          title: 'Great',
          html: res.mensaje,
          type: 'success'
        }).then((result) => {
          if (result.value) {
            Swal.close();    // -->> This should work 
            this.element.style.display = 'none';
            document.body.classList.remove('modalExperience');
          }
        });

Answer 2

我在 Whosebug 上找到了更早 post 的解决方案； Close bootstrap modal using typescript in angular 2

从 angular 组件关闭模态 window

Close modal window from angular component

sweetalert

angular