Angular 6子组件中的Bootstrap 4模态

在使用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>

我个人认为，模式背后的问题是由于行类的样式。使用开发工具删除display：flex; 模态看起来还可以，但是页面上的其余样式变得一团糟。我不知道该如何克服。

补充说明：不能删除row或col-lg-9类。

我将衷心感谢您的帮助。

非常感谢，亚历克斯