Angular 6子组件中的Bootstrap 4模态答案

【问题标题】：Bootstrap 4 modal in Angular 6 child componentAngular 6子组件中的Bootstrap 4模态
【发布时间】：2019-02-20 15:03:20
【问题描述】：

在使用 Angular 6 + Bootstrap 4 组合时，我偶然发现了模态的问题。每当我打开模态框时 - 它会在 modal-backdrop 后面打开。有趣的是它不是项目中唯一的模态，但只有这个很有趣。

我已导入相关库如下（Angular.json文件）：

"styles": [            
          "src/styles.scss",
          "node_modules/bootstrap/dist/css/bootstrap.min.css"
        ],
        "scripts": [
          "node_modules/jquery/dist/jquery.min.js",  
          "node_modules/popper.js/dist/umd/popper.min.js", 
          "node_modules/bootstrap/dist/js/bootstrap.min.js"
        ]

打开模态的按钮：

  <div class="row">
    <div class="col">
      <button class="btn btn-md" data-toggle="modal" data-target="#modalID">Click Here</button>
    </div>
  </div>

模态本身（简化）：

<div class="modal fade" id="modalID">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <!-- Header Here -->
      </div>
      <div class="modal-body">
        <!-- Body here -->
      <div class="modal-footer">
        <div class="col-6">
          <!-- Buttons here -->
      </div>
    </div>
  </div>
</div>

现在所有的 HTML 代码都在一个子组件中——它是父组件的一部分。代码如下：

<div class="row">    
  <div class="col-lg-9">
     <div class="space-bottom">
       <app-given-component></app-given-component>
     </div>
   </div>
</div>

我个人认为，模态在背景背后的问题是由于 row 类的样式。使用 dev tools 我删除了 display:flex; 并且模态似乎没问题，但是页面上的其余样式变得一团糟。我不知道如何克服。

附加说明：删除 row 或 col-lg-9 类不是一个选项。

非常感谢您的帮助。

非常感谢，亚历克斯

【问题讨论】：

有几种方法可以解决这个问题。理想情况下，您会将模态直接放在中。如果这不是一个选项，您可以在模式上使用高 z-index 来强制它在前台。检查这个问题：stackoverflow.com/questions/10636667/…
我不能把它放在组件之外，因为我在 .ts 文件中调用了一些私有函数。将 z-index 放在模态上不会一个变化，同时将 z-index:-1; 放在 modal-backdrop 上，不仅推动了模态，而且推动了一些 Cards （在同一页上）...

标签： html css angular bootstrap-4 bootstrap-modal

【解决方案1】：

在多次尝试使用 CSS 解决问题失败后，我选择了最后的选择，并结合了子组件和父组件。这让我有机会将我的 modal 放在 row -> col 类结构之外。

显然，当父元素之一是 display:flex;

时，您不能使用 modal

不是一个很好的解决方案，但确实有效！

【讨论】：

【解决方案2】：

//angular.json

内部脚本

"./node_modules/jquery/dist/jquery.min.js",

"./node_modules/popper.js/dist/umd/popper.min.js"

"./node_modules/bootstrap/dist/js/bootstrap.min.js"

在 style.css 中

@import "~bootstrap/dist/css/bootstrap.css";

@import "~font-awesome/css/font-awesome.css";

【讨论】：