javascript - 如何通过在angular7中的模态组件外部单击来隐藏ngx-simple-modal？

Question

我在 angular7 应用程序中使用 ngx-simple-modal 插件，我想在用户单击模态组件外部时关闭模态？这个我试过了

this.SimpleModalService.addModal(LinkPopupComponent, {title: 'Alert title!', message: 'Alert message!!!'},{ closeOnClickOutside: true });

我使用此 { closeOnClickOutside: true } 选项在用户离开模态组件时关闭模态，如文档中所述。

在我的 LinkPopupComponent 中，这里是我的 linkpopup.component.ts

中的代码

// includes

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { FormControl } from '@angular/forms';
import { ReferalLinks, Category, Countries, Company } from '@app/core/services/FormModels.model';
import { LinkService } from '@app/module/link/service/link.service';
import { DataService } from '@app/core/services/data.service';
import { Constants } from '@app/core/services/Constants.service';
import { UtilitySerivce } from '@app/core/services/utitility.service';
import { SimpleModalComponent } from 'ngx-simple-modal';
import { Observable } from 'rxjs';
import { map, startWith } from 'rxjs/operators';
declare var $: any;

export interface LinkModel {
    title: string;
    message: string;
}

export class LinkPopupComponent extends SimpleModalComponent<LinkModel, null> implements OnInit,LinkModel {

constructor(private linkSerive: LinkService) {
        super();
        this.getCountries();
    }
   /// Here is my all related code but can't share that code
}

在我的linkpopup.component.html中我的Html是这样的

<div class="modal-container">
    <i class="material-icons cursor-pointer close-btn-specs" (click)="close()">close</i>

    <h4 class="frm-hdng">Submit a referral link</h4>
    <div class="text-left mrgTop">
        <label class="field-label">Company</label>
    </div>
    <div class="autocomplete">
        <div class="company-text-area" [class.bdr-red]="isCompanyValid === false  && nameDisplayModel === ''">
            <input type="text" placeholder="E.g. ClassPass, etc." [ngClass]="getCssClassOnValidationCondition(true)" (keyup)="credentialsSearchFilter($event)" (blur)="hideList()" [(ngModel)]="nameDisplayModel" style="width:100%">
        </div>
        <ul *ngIf="companies.length > 0" class="suggestion-list mt-2">
            <li class="modal-li" *ngFor="let record of companies" (mousedown)="getNameValue(record)">{{record.name}}</li>
        </ul>
    </div>
    <div class="text-left mrgTop">
        <label class="field-label">Referral Url</label>
    </div>
    <div class="company-text-area" [class.bdr-red]="isUrlValid == false || isLinkValidation === false">
        <input *ngIf="referralLink.isLink === 1" type="url" [ngClass]="getCssClassOnValidationCondition(false)" (input)="checkUrl()" (blur)="Validation(true)" [(ngModel)]="referralLink.referral_link" placeholder="E.g. www.xyzcompany.com/A4XpA" style="width: 100%;">
        <input *ngIf="referralLink.isLink === 0" type="text" [ngClass]="getCssClassOnValidationCondition(false)" (blur)="Validation(false)" [(ngModel)]="referralLink.referral_code" placeholder="E.g. JJaXmm22" style="width: 100%;">
    </div>

    <div class="not-link-div" *ngIf="isUrlValid === true || isCompanyValid === true || isLinkValidation === true">
        <label class="note">Not a link? Enter a <span class="purple Cpointer" *ngIf="referralLink.isLink === 1"
                        (click)="refTypeChange(0)">referral code</span> <span class="purple Cpointer"
                        *ngIf="referralLink.isLink === 0" (click)="refTypeChange(1)">link</span> instead.</label>
    </div>



    <div class="col-12 error-state-msg mt-3">
        <span class="red font-muli validation-error-msg-text" *ngIf="isUrlValid === false || isCompanyValid === false || isLinkValidation === false">
                <img src="./../../../../assets/svg-icons/exclamation.svg" alt="error msg image"
                    style="padding-right: 4px;">{{validationMsg}}
            </span>
    </div>

    <div class="mrgTop">
        <button class="cstm-btn bdr-purple bgPurple Cpointer" [disabled]="((isUrlValid == undefined || isUrlValid== false) || (isCompanyValid === false || isCompanyValid=== undefined) || (isLinkValidation === false || isLinkValidation=== undefined))? true : false"
            [style.cursor]="((isUrlValid == undefined || isUrlValid== false) || (isCompanyValid === false || isCompanyValid=== undefined) || (isLinkValidation === false || isLinkValidation=== undefined))? 'not-allowed' : 'pointer'" (click)="save()">Submit for approval</button>
    </div>

</div>

但在其外部单击后仍然没有关闭模态。我该怎么做？

Answer 1

如果您使用 ngx-simple-modal

除非您必须为您的类手动css，否则您必须用那里的类包装

在 ngx-simple-modal 中

   <div class="modal-content">
      <div class="modal-header">
        <h4>{{title || 'Alert!'}}</h4>
      </div>
      <div class="modal-body">
        <p>{{message || 'TADAA-AM!'}}</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" (click)="close()">OK</button>
      </div>
    </div> 

在您的代码中

<div class="modal-container">

class="modal-container" 不等于 class="modal-content"

希望这就是问题所在......!