Angular ngx引导引导引导4：关闭后模式仍然存在

我在使用ngx bootstrap和bootstrap 4时遇到问题：在成功打开模式后，如果我关闭它，我可以看到覆盖我所有页面的背景，因此我的应用程序无法使用

如果在打开模式文件时使用配置参数{background:false}。。。当我关闭它时，背景不可见，但身体元素得到模态打开类，所以我的应用程序再次完全无法使用

代码如下：

组件：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);
        }

    }

}

从'@angular/core'导入{Component，OnInit，TemplateRef}；
从“ngx引导/模式”导入{BsModalService}；
从“ngx bootstrap/modal/modal options.class”导入{BsModalRef}；
从“../config”导入{config}
从“../product/product.service”导入{ProductService}；
从“../Product/Product”导入{Product}；
@组成部分({
选择器：'应用程序产品列表'，
templateUrl:'./product list.component.html'，
样式URL:['./product list.component.css']，
提供者：[ProductService，BsModalService]
})
导出类ProductListComponent实现OnInit{
loadedProducts:Array=[]；
公共modalRef:BsModalRef；
建造师(
私人产品服务：产品服务，
专用modalService:BsModalService）{
}
恩戈尼尼特（）{
这个.productService.loadProductList（）。然后(
serverProducts=>this.loadedProducts=serverProducts）；
}
deleteButtonClicked（Product2删除：Product，
confirmDeleteModalTemplate:TemplateRef）：无效{
if（config.showconfirmdeletemodel）{
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>

产品目录
无争议的干草产品
SKU
名义
普里西奥
{{productRow.sku}
{{productRow.name}
{{productRow.price}
生产确认书
&时代；
埃斯塔斯塔斯塔斯塔斯塔斯塔斯塔斯塔斯塔斯塔斯塔斯塔斯塔斯塔斯塔斯塔斯塔斯塔斯塔斯塔斯塔斯塔斯塔斯塔斯塔：




“十分钟后，我们就可以开始行动了

取消者
Eliminar

我希望任何人都能帮助我，我还没有找到任何解决方案，我试图尽可能接近ngx引导文档上的演示，但是。。。不可能

---

提前谢谢

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

谢谢你的回答，但是我对这个解决方案有一些问题：如果我从我的组件的提供者中删除BsModalService。。。然后我支持我也必须删除组件构造函数上的modalService，然后。。。我无法调用此.modalService.show（）来显示模式。。。我说的对吗？不，通过导入模态模块，服务已经“提供”。儿童组件（您的组件）可以访问由家长提供的任何服务。对不起，Ironflash，但我仍然不理解您的答案。请参阅ngxbootstrap的官方文件：。他们要求您在组件上导入BsModalService，请查看构造函数（privateModalservice:BsModalService）。该服务被注入到构造函数中，因此，当我们想要打开模式时，我们会执行这个.modalService.show（模板）；如果我不在构造函数中注入服务，我如何访问服务的“show”方法？我认为您混合了提供者和依赖注入的概念。只要提供了服务，任何子组件都可以将其注入。在这种情况下，模态模块提供服务。因此，您的组件必须只注入它。如果你看一下他们的例子，他们没有“providers:[BsModalService]”，但是他们将服务注入到构造函数中。我的意思是从提供者列表中删除BsModalService并将其保存在构造函数中。最后我理解了，我只是按照您的建议从组件的提供者数组中删除了BsModalService，然后。。。瞧！解决了的！非常感谢您的回答和耐心，Ironflash！！