如何关闭Ng引导程序模型

Question

我有一个组件，其中有两个基于特定条件打开的引导模型。

我在两个模型上都有一个按钮，点击后会有一个成功的http调用，我需要关闭模型。

我正在使用modelRef来做这件事。这对其中一个很好，但对另一个不起作用。

<ng-template #viewRemark let-c="close" let-d="dismiss">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title text-center" id="NewPricingTitle">Remarks </h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true" (click)="d('Cross click')">✕</span>
</button>
</div>
<div class="modal-body mt-0 pt-0">
<div class="row table-filter">
<div class="col">
<div class="form-group row">
<label for="staticEmail" class="col-sm-5 col-form-label">PO Number:</label>
<div class="col-sm-7">
<input type="text" readonly="" class="form-control-plaintext font-weight-bold" value="{{modalData.orderNumber}}">
</div>
</div>
<div class="form-group row">
<label for="staticEmail" class="col-sm-5 col-form-label">PO Date:</label>
<div class="col-sm-7">
<input type="text" readonly="" class="form-control-plaintext font-weight-bold" value="{{modalData.orderDate  | date:'dd/mm/yyyy'}}">
<label>{{modalData.orderdate  | date:'dd/mm/yyyy'}}</label>
</div>
</div>

</div>
</div>
<hr/>
<textarea  class="text-area" [(ngModel)]="remarks"></textarea>
<!-- <p class="text-center modal-p">{{modalData.remarks}}</p> -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary modal-add" (click)="updateRemarks()">ADD</button>
</div>
</div>
</ng-template>

<ng-template #changeStatus let-c="close" let-d="dismiss">
<div class="modal-dialog modal-dialog-centered m-0" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title text-center" id="NewPricingTitle">Update Order Status - {{changeOrderStatusData.orderNumber}}</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true" (click)="d('Cross click')">✕</span>
</button>
</div>
<div class="modal-body mt-0 pt-0">
<div class="row table-filter">
<div class="col">
<div class="form-group row">
<label for="staticEmail" class="col-sm-5 col-form-label">PO Date:</label>
<div class="col-sm-7">
<input type="text" readonly="" class="form-control-plaintext font-weight-bold" value="{{changeOrderStatusData.orderDate}}">
</div>
</div>
<div class="form-group row">
<label for="staticEmail" class="col-sm-5 col-form-label">Current Status:</label>
<div class="col-sm-7">
<input type="text" readonly="" class="form-control-plaintext text-warning" value="{{changeOrderStatusData.status}}">
</div>
</div>
<div class="select-box box-modal mt-5">
<label>
<select class="form-control form-control-sm" [(ngModel)]="newStatus">
<option value="SelectStatus" selected="selected">Select Status </option>
<option value="Accepted">Accepted </option>
<option value="Rejected">Rejected </option>
<option value="Ready to Ship"> Ready to Ship </option>
<option value="PartiallyShipped"> Partially Shipped </option>
<option value="Delivered"> Delivered </option>
<option value="Rejected"> Rejected </option>
<option value="Invoiced"> Invoiced </option>
</select>
</label>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<div class="container-fulid">
<div class=" my-3">
<div class="col text-center">
<button type="button" class="btn btn-outline-primary" (click)="d('CANCEL click')">CANCEL</button>
<button type="button" class="btn btn-primary" data-dismiss="modal" data-toggle="modal" (click)="updateStatus(changeOrderStatusData.orderId)">UPDATE</button>
</div>
</div>
</div>
</div>
</div>
</div>
</ng-template>

Answer 1

通过在构造函数中添加DI来获取模型引用

constructor(config: NgbModalConfig, private modalService: NgbModal) {
}

打开：

this.modalReference = this.modalService.open("ModelID"); //changeStatus  or viewRemark 

关闭：

this.modalReference.close("ModelID"); //changeStatus  or viewRemark 

https://ng-bootstrap.github.io/#/components/modal/examples#config