angular - 如何关闭 Ng-bootstrap 模型
问题描述
我有一个组件,其中有两个基于特定条件打开的引导模型。
我在两个模型上都有一个按钮,点击它有一个成功的 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>
解决方案
通过在构造函数中添加 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
推荐阅读
- google-analytics - 解决 Google Analytics 和 Google Optimize 之间的配置不匹配问题?
- c# - 只有赋值、调用、递增、递减、等待、Unity3D
- asp.net-core - 将 UTC 偏移量传递到控制器路由中
- javascript - 如何清除所有连接客户端的画布?
- reactjs - 如何在组件反应打字稿中返回值
- ruby - 这个特定代码中的下划线有什么作用?
- c# - 将 JWT 承载授权添加到 NSwag 13
- python-3.x - 如何重复渲染seaborn对象?
- firebase - Flutter - 可以在没有 Firebase 的情况下使用 Google 登录吗?
- java - 如何使 java GC 可预测?