javascript - ng2-bootstrap-modal 在 webpack 编译后不起作用

Question

我将 ng2-bootstrap-modal 添加到我的 Angular 项目中，并按照此 url 中推荐的步骤进行操作:https://www.npmjs.com/package/ng2-bootstrap-modal

在我将它[代码是用 webpack ‘编译’] 发布到 FAT env 之前，Everiting 一直运行良好。据我了解，它无法创建对话框持有者。

我深入研究模态代码，发现错误在 dialog.service.js 的“DialogService.prototype.createDialogHolder”中

组件的原始代码如下所示:

DialogService.prototype.createDialogHolder = function () {
    var _this = this;
    var componentFactory = this.resolver.resolveComponentFactory(dialog_holder_component_1.DialogHolderComponent);
    var componentRef = componentFactory.create(this.injector);
    var componentRootNode = componentRef.hostView.rootNodes[0];
    if (!this.container) {
        var componentRootViewContainer = this.applicationRef['_rootComponents'][0];
        this.container = componentRootViewContainer.hostView.rootNodes[0];
    }
    this.applicationRef.attachView(componentRef.hostView);
    componentRef.onDestroy(function () {
        _this.applicationRef.detachView(componentRef.hostView);
    });
    this.container.appendChild(componentRootNode);
    return componentRef.instance;
};

webpack“编译”后的代码如下:

t.prototype.createDialogHolder = function() {
        var t = this
          , e = this.resolver.resolveComponentFactory(u.DialogHolderComponent)
          , n = e.create(this.injector)
          , r = n.hostView.rootNodes[0];
        if (!this.container) {
            var o = this.applicationRef._rootComponents[0];
            this.container = o.hostView.rootNodes[0]
        }
        return this.applicationRef.attachView(n.hostView),
        n.onDestroy(function() {
            t.applicationRef.detachView(n.hostView)
        }),
        this.container.appendChild(r),
        n.instance
    }

错误在一行中:

var o = this.applicationRef._rootComponents[0];

因为 _rootComponents 为空。

你知道怎么解决吗？注意:代码与上述链接中的代码 100% 相同。

更新:在 app.module.ts 中，我尝试使用默认容器和特定容器导入 BootstrapModalModule.forRoot({ container: document.body })

Answer 1

以下答案对普通 bootstrap 有效。但由于 ngx-bootstrap(又名 ng2-bootstrap)是建立在普通 Bootstrap 之上的，它仍然可能是相关的。

我注意到在 .angular-cli.json 文件中导入 bootstrap.css，正如在 ngx 上推荐的那样 < strong>dev 模式，但一旦使用 webpack 编译就无法工作。

在 src/styles.css 文件中导入 Bootstrap ，如 this post对我有用。