angular - ngx-bootstrap Bootstrap4 : after closing modal is still there

Question

我在将 ngx-bootstrap 与 Bootstrap 4 结合使用时遇到问题:成功打开模式后，如果我关闭它，我可以看到背景覆盖了我的所有页面，因此我的应用无法使用。

如果我在打开模式时使用配置参数 { backdrop: 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">&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 文档上的演示，但是......没办法。

提前致谢!

Answer 1

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