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模塊中創建的單例實例。這是導致背景的奇怪行爲不會消失的原因。