如何使用NgbModal仅关闭angular中当前打开的模态？

Question

我只想使用NgbModal关闭当前打开的角度模态。但是NgbModal的'dismissAll（）'方法会关闭所有当前打开的模态。

我在项目中创建了两个条目组件

• ConsumerList //主要组件

  -AddConsumer //条目组件// ChildModal

  -ShowAllConsumers //条目组件// ParentModal

我的代码：

    **//ShowAllConsumers.html  (Parent Modal)**

    <div class="modal-header">
      <div class="col-md-6">
        <h4>Consumers</h4>
      </div>
      <div class="col-md-6">
        <button style="float: right" type="submit" mat-raised-button color="primary" (click)="CloseModal()">
          Back
        </button>
      </div>

    </div>
    <div class="modal-body">
      <div class="row">
        <div class="col-md-12" id="gMap" style="min-height: 550px;width: 100%;height:100%">
        </div>
      </div>
    </div>

    <ng-template id='CLocation' #Consumer let-c="close" let-d="dismiss">
      <kt-AddConsumer [InputModel]="this.SelectedConsumer"></kt-AddConsumer>
    </ng-template>

    **//AddConsumer.html (Child Modal)**

    <div class="modal-header">
        <h4>Edit Consumer </h4>
    </div>
    <div class="col-md-6">
        <button style="float: right" id = "btnBack" mat-raised-button color="primary" (click)="CloseModal()">
            Back
        </button>
        <button style="float: right;margin-right: 10px;"
            *ngIf="this.Operation === 'ADD'" type="submit"
            mat-raised-button color="primary" (click)="SaveConsumer()">
            Save
        </button>
        <button style="float: right;margin-right: 10px;"
            *ngIf="this.Operation === 'EDIT'" type="submit"
            mat-raised-button color="primary" (click)="SaveConsumer()">
            Edit
        </button>

    </div>
    <div class="modal-body">
        <div class="row">
            <div class="col-md-12" id="map" style="min-height: 550px;width: 100%;height:100%">
            </div>
         </div>
     </div>

以上代码的输出为：

**//ShowAllConsumers.ts**


import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap';
declare const google: any;

@Component({
  selector: 'kt-ShowAllConsumers',
  templateUrl: './ShowAllConsumers.component.html',
  styleUrls: ['./ShowAllConsumers.component.scss']
})
export class ShowAllConsumersComponent implements OnInit {
  @Input() InputModel: ConsumerModel[];
  AreaCoordinates: AreaGeoCoordinates[];
  @ViewChild('Consumer') ConsumerRef: ElementRef;
  gMap: any;
  marker: any;
  Operation: string;
  SelectedConsumer: ConsumerModel;

  constructor(
    public _ngZone: NgZone,
    public chRef: ChangeDetectorRef,
    private ngbModalService: NgbModal) { }

  ngOnInit() {
    window["angularComponentRef"] = { component: this, zone: this._ngZone };
    google.maps.event.addDomListener(window, "load", this.InitializeMap());
  }

  InitializeMap() {
    this.gMap = new google.maps.Map(document.getElementById('gMap'), {
      zoom: 10,
      center: { lat: 18.519834, lng: 73.857944 },
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    this.ShowCoordinates();
  }

  OpenLocationModal(AreaName, AreaRefNo, ConsumerAddress, ConsumerName, ConsumerNo, DistributorID, Latitude, Longitude, MobileNo, Pin, Source, UniqueConsumerId) {
    var m = new ConsumerModel();
    m.AreaName = AreaName;
    m.AreaRefNo = AreaRefNo;
    m.ConsumerAddress = ConsumerAddress;
    m.ConsumerName = ConsumerName;
    m.ConsumerNo = ConsumerNo;
    m.DistributorID = DistributorID;
    m.Latitude = Latitude;
    m.Longitude = Longitude;
    m.MobileNo = MobileNo;
    m.Pin = Pin;
    m.Source = Source;
    m.UniqueConsumerId = UniqueConsumerId;
    debugger;
    this.SelectedConsumer = m;
    //Opening the child modal
    var modalRef1 = this.ngbModalService.open(this.ConsumerRef, {
      windowClass: 'modalclass2',
      centered: true,
      size: "lg",
      backdrop: "static"
    });
    modalRef1.result.then(
      () => {
        alert("Close button clicked")
      }
      });
  }



  CloseModal() {
    this.ngbModalService.dismissAll();
  }

}

**//AddConsumer.ts**

import { Component, OnInit, Input, ChangeDetectorRef, Output, EventEmitter, ViewChild } from '@angular/core';
import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { ModalDirective } from 'ngx-bootstrap/modal';

@Component({
  selector: 'kt-AddConsumer',
  templateUrl: './AddConsumer.component.html',
  styleUrls: ['./AddConsumer.component.scss'],
  providers: [AreawiseConsumerListComponent,NgbActiveModal]
})
export class AddConsumerComponent implements OnInit {
  @Input() InputModel: ConsumerModel;
  constructor(
    private activeModal: NgbActiveModal) { }

  ngOnInit() {

  }

  CloseModal() {
    this.activeModal.dismiss();
  }

}

当我单击子模态的“后退”按钮时，所有两个模态都将关闭，但我只想关闭子模态。

有什么办法可以达到同样的效果吗？

Answer 1

在您的FormatString([Check].[CheckAmount] + [Check].[CheckCurrency]) 中，您需要注入对AddConsumer.ts和构造函数中选定使用者的引用。

您还可以使用NgbActiveModal的模板和属性/输入/绑定删除黑客代码。

SelectedConsumer

在此处打开对话框，注入... import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'; export class AddConsumer { constructor( @Inject('selectedConsumer') private selectedConsumer: ConsumerModel, private activeModal: NgbActiveModal, ... ) { } CloseModal() { this.activeModal.dismiss(); } } ：

selectedConsumer