javascript - 如何通过在angular7中的模态组件外部单击来隐藏ngx-simple-modal？(How to hid ngx-simple-modal by clicking outside of modal component in angular7?)

Question

(The bounty expires in 6 days) .

((赏金将 在6天后失效)

。) Answers to this question are eligible for a +50 reputation bounty.

(这个问题的答案有资格获得+50声望奖励。)

Fahad Hassan Subzwari is looking for an (answer from a reputable source) .

(Fahad Hassan Subzwari正在寻找(信誉良好的消息来源)

。)

I am using ngx-simple-modal plugin in angular7 app and i want to close modal when user click outside of modal component?

(我在angular7应用程序中使用ngx-simple-modal插件，当用户单击模态组件之外时，我想关闭模态吗？)

I tried this

(我试过了)

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

i used this { closeOnClickOutside: true } option to close modal when user will outside of modal component as described in documentation.

(当用户将按照文档中的说明使用模态组件之外时，我使用了此{ closeOnClickOutside: true }选项关闭模态。)

In my LinkPopupComponent here is the code in my linkpopup.component.ts

(在我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 } 

In my linkpopup.component.html my Html is like this

(在我的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="Eg 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="Eg 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="Eg 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> 

But still modal is not closing after clicking outside of it.

(但在其外部单击后，模态仍未关闭。)

How can i do that?

(我怎样才能做到这一点？)

  ask by Fahad Hassan Subzwari translate from so

Answer 1

等待大神答复