ngx-bootstrap Bootstrap4: nach dem Schließen modal ist immer noch da

Question

Ich habe ein Problem mit ngx-Bootstrap mit Bootstrap 4: Nach dem erfolgreichen Öffnen eines Modals, wenn ich es schließe, kann ich den Hintergrund für alle meine Seite sehen, so dass meine App unbrauchbar.

Wenn ich den config-Parameter {budget: false} verwende, wenn ich das modal öffne ... wenn ich es schließe, ist kein Hintergrund sichtbar, aber body-Element bekommt modal-offene Klasse, also ist meine App wieder völlig unbenutzbar.

Es ist der Code:

Komponente: Produkt-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); 
     } 

    } 

} 

Komponentenvorlage: Produkt-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> 

ich jemand hoffen kann helfen Ich habe keine Lösung gefunden, ich versuche so nah wie möglich an die Demos von ngx-bootstrap doc heranzukommen, aber ... auf keinen Fall.

Vielen Dank im Voraus!

Answer 1

Ich lief gestern in derselben Ausgabe. Die Lösung für mich war, den BSModalService aus der Providerliste in der Komponente zu entfernen. Wenn Sie den Dienst der Providerliste hinzufügen, erhält die Komponente ihre eigene Instanz des Service anstelle der Singleton-Instanz, die im Modal-Modul erstellt wurde. Dies führt dazu, dass das seltsame Verhalten des Hintergrunds nicht verschwindet.