![](/img/trans.png)
[英]Angular datatable unsubscription error while closing ngx-bootstrap modal
[英]ngx-bootstrap Bootstrap4: after closing modal is still there
我将ngx-bootstrap与Bootstrap 4结合使用时遇到问题:成功打开模式后,如果将其关闭,则可以看到覆盖所有页面的背景,因此我的应用无法使用。
如果我在打开模态时使用config参数{background:false},则在关闭模态时看不到任何背景,但是body元素变为modal-open类,因此我的应用程序再次完全无法使用。
有代码:
组件:product-list.component.ts
import { Component, OnInit, TemplateRef } from '@angular/core';
import { BsModalService } from 'ngx-bootstrap/modal';
import { BsModalRef } from 'ngx-bootstrap/modal/modal-options.class';
import { config } from '../config'
import { ProductService } from '../product/product.service';
import { Product } from '../product/product';
@Component({
selector: 'app-product-list',
templateUrl: './product-list.component.html',
styleUrls: ['./product-list.component.css'],
providers: [ProductService, BsModalService]
})
export class ProductListComponent implements OnInit {
loadedProducts: Array<Product> = [];
public modalRef: BsModalRef;
constructor(
private productService: ProductService,
private modalService: BsModalService) {
}
ngOnInit() {
this.productService.loadProductList().then(
serverProducts => this.loadedProducts = serverProducts);
}
deleteButtonClicked(product2BeDeleted: Product,
confirmDeleteModalTemplate: TemplateRef<any>): void {
if (config.showConfirmDeleteModal) {
this.modalRef = this.modalService.show(confirmDeleteModalTemplate);
}
}
}
组件模板:product-list.component.html
<div class="card">
<div class="card-block">
<h4 class="card-title">Listado de productos</h4>
<div *ngIf="loadedProducts.length == 0" class="alert alert-warning" role="alert">
<span class="fa fa-warning"></span> No hay productos disponibles
</div>
<table *ngIf="loadedProducts.length > 0" class="table table-striped">
<thead class="thead-inverse">
<tr>
<th></th>
<th>SKU</th>
<th>Nombre</th>
<th>Precio</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let productRow of loadedProducts">
<td>
<a [routerLink]="['/product/', productRow.id]" title="Editar este producto"
class="btn btn-sm btn-primary">
<span class="fa fa-pencil"></span>
</a>
<button title="Eliminar este producto"
(click)="deleteButtonClicked(productRow, confirmDeleteModalTemplate)"
class="btn btn-sm btn-danger">
<span class="fa fa-trash"></span>
</button>
</td>
<td>{{productRow.sku}}</td>
<td>{{productRow.name}}</td>
<td>{{productRow.price}}</td>
</tr>
</tbody>
</table>
<ng-template #confirmDeleteModalTemplate>
<div class="modal-header">
<h5 class="modal-title" id="confirmDeleteModalLabel">Confirmar eliminación de un producto</h5>
<button type="button" class="close" aria-label="Cerrar" (click)="modalRef.hide()">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Estas a punto de eliminar este producto:</p>
<ul>
<li></li>
</ul>
<p><strong>¡Ten en cuenta que esta acción no se puede deshacer!</strong></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" (click)="modalRef.hide()">Cancelar</button>
<button type="button" class="btn btn-primary">Eliminar</button>
</div>
</ng-template>
</div>
</div>
我希望任何人都可以帮助我,但我还没有找到任何解决方案,我试图尽可能地接近ngx-bootstrap doc上的演示,但是...没办法。
提前致谢!!
我昨天也遇到过同样的问题。 对我来说,解决方案是从组件的提供程序列表中删除BSModalService。 当您将服务添加到提供程序列表时,组件将获得其自己的服务实例,而不是在Modal模块中创建的单例实例。 这是导致背景异常行为消失的原因。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.