Angular + ng 引导模式未出现答案

【问题标题】：Angular + ng bootstrap modal not appearingAngular + ng 引导模式未出现
【发布时间】：2018-05-05 19:56:36
【问题描述】：

我在我的项目中使用 ng bootstrap。我所做的只是打开一个模式。我读了similar thread，但没有包含引导 css。

我正在关注this 示例。

当我单击按钮打开模态时，模态会附加到 DOM 中（使用开发工具检查时可见），但在屏幕上不可见。

我在我的 .angular-cli.json 中包含了引导 css

"styles": [
        "styles.css",
        "../node_modules/bootstrap/dist/css/bootstrap.min.css"
      ],

当查看页面源代码时，Bootstrap css 在styles.bundle.js 中也是可见的。

编辑 1：检查时，ngb-modal-window 的不透明度设置为 0。当我将其设置为 1 时，弹出窗口变得可见。但是弹出窗口的位置不是中心。它被拉到顶部。请参考图片：

【问题讨论】：

我认为，json 无法读取 "../"
Bootstrap在styles.bundle.js中可见，说明json已经读过了。
我认为这与您的问题无关，但您可能需要考虑更改导入样式的顺序。（引导后的styles.css。）原因是您的文件是按照您在angular-cli文件中列出的顺序编译和提供的。因此，如果您要为引导类提供自己的样式，您会发现 bootstrap.min.css 覆盖了 styles.css 中指定的样式。

【解决方案1】：

你可以包含在css中

@import url('../node_modules/bootstrap/dist/css/bootstrap.min.css');
in 'styles.css'

在某些情况下，ngx-bootstrap 在 angular 2/4 中无法完全按预期工作。

【讨论】：

【解决方案2】：

我在尝试将 ng-bootstrap 与 bootstrap 3 一起使用时遇到了同样的问题。安装 ng-bootstrap-to-bootstrap-3 并按照说明进行操作，节省了我的时间。

【讨论】：