ngx-bootstrap Bootstrap4：关闭模式后仍然存在

Question

使用ngx-bootstrap与Bootstrap 4时出现问题：成功打开模式后，如果关闭它，我可以看到背景覆盖我的所有页面，所以我的应用程序获取无法使用。

如果我在打开模式时使用配置参数{backdrop：false} ...当我关闭它时，没有背景可见，但body元素获得模态公开类，因此我的应用程序再次无法使用。

有代码：

成分：产品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); 
     } 

    } 

} 

组件模板：产品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">&times;</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上的演示，但是......没办法。

在此先感谢！

Answer 1

昨天我遇到了同样的问题。对我来说，解决方案是从组件中的提供程序列表中删除BSModalService。将服务添加到提供程序列表时，组件将获取其自己的服务实例，而不是在Modal模块中创建的单例实例。这是导致背景的奇怪行为不会消失的原因。