Angular 叠加层无法使用 bootstrap 侧边栏模板正确显示

Question

我尝试在单击按钮时向组件添加叠加层，如下例所示：
https://stackblitz.com/edit/overlay-demo-fv3bwm?file=app/app.component.ts
但是在将它添加到我的组件之后，覆盖元素（在我的例子中只是一个 textarea 元素）显示在我渲染的侧边栏模板下方，而不是在渲染的路由器出口组件上方。

这是我的边栏模板：

<div class="d-flex" id="wrapper">
  <!-- Sidebar -->
  <div class="bg-light border-right" id="sidebar-wrapper">
    <div class="sidebar-heading" > <a routerLink="">
      <img style="width: 200px;" src="../../../assets/images/logo">
      <br> <h4>App</h4></a></div>
    <div class="list-group">
      <a routerLink="requirements" routerLinkActive="active" 
        class="list-group-item list-group-item-action bg-light">Component1</a>
      <a routerLink="dataset" routerLinkActive="active"
        class="list-group-item list-group-item-action bg-light">Comonent2</a>
      <a routerLink="dag" routerLinkActive="active"
        class="list-group-item list-group-item-action bg-light">Comonent3</a>
      <a routerLink="tasks" routerLinkActive="active" 
        class="list-group-item list-group-item-action bg-light">Comonent4</a>
    </div>
  </div>
  <!-- /#sidebar-wrapper -->
  <!-- Page Content -->
  <div id="page-content-wrapper">
    <nav class="navbar navbar-expand navbar-light bg-light border-bottom">
      <button class="btn btn-primary" id="menu-toggle"><i class="bi-arrow-right"></i>Toggle Menu</button>

      <div class="collapse navbar-collapse " id="navbarSupportedContent">
        <ul class="navbar-nav ml-auto mt-2 mt-lg-0 ">
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Dropdown
            </a>
            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
              <a class="dropdown-item text-center" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item text-center text-secondary"  (click)="onLogout()">Logout</a>
            </div>
          </li>
        </ul>
      </div>
    </nav>
    <div class="container-fluid">
      <router-outlet></router-outlet>
    </div>
  </div>
  <!-- /#page-content-wrapper -->
</div>

当我尝试通过从我的侧边栏组件中删除路由器插座并将其添加到应用程序组件来将侧边栏与我的路由器插座分开时，我遇到了类似的问题：

<app-sidebar></app-sidebar>
<router-outlet><router-outlet>

但最终保留了上面的侧边栏模板（带有 router-outlet 标签）并且只在我的应用程序组件中保留了 app-sidebar 标签：

<app-sidebar></app-sidebar>

在此图像中，红色标记是我希望显示叠加层的位置，黑色标记是实际位置。
Inspect overlay

编辑：

这是在 stackblitz 项目中重现的问题（叠加按钮在第 1 部分导航 link 中）：
https://stackblitz.com/edit/angular-crud-deborahk-axtfg7?file=src%2Fapp%2Fapp.module.ts

我还发现叠加层不起作用，这不仅是侧边栏问题我可以单击叠加层按钮，它会一遍又一遍地创建模板。
在这里您可以看到我的侧边栏，我在其中标记了黑色十字以及如何显示叠加层 overlay output

*注意：stackblitz 示例在 angular 9 上，而我正在使用 angular 11*

Answer 1

问题似乎与 bootstrap/material 相关。您已经添加了 bootstrap 和 material 包，并且在 style.css.

中的 css 下面添加了

@import '~bootstrap/dist/css/bootstrap.min.css';

但是您没有在项目的任何地方包含 material css。添加以下行，您的问题将得到解决。

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

注意：- 请根据您的主题包含 css 文件。

Angular 叠加层无法使用 bootstrap 侧边栏模板正确显示

Angular overlay not displaying properly with a bootstrap sidebar template

overlay

typescript

bootstrap-4

angular

angular11