使用引导工具侧边栏模板无法正确显示角度覆盖

Question

当我点击如下按钮时，我试图向组件添加覆盖：
https://stackblitz.com/edit/overlay-demo-fv3bwm?file=app/app.component.ts
但在将其添加到我的组件后，覆盖元素(在我的情况下只是一个文本区域元素(会显示在我渲染的侧边栏模板下，而不是显示在渲染的路由器出口组件上。

这是我的侧边栏模板：

<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>

但最终保留了上面的侧栏模板(带有路由器出口标签(，只在我的应用程序组件中保留了应用程序侧栏标签：

<app-sidebar></app-sidebar>

在这张图中，红色标记是我想要显示叠加的地方，黑色标记是它的实际位置。
检查叠加

编辑：

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

我还发现覆盖不起作用，这不仅仅是侧边栏的问题，我可以点击覆盖按钮，它不断地创建模板
在这里你可以看到我的侧边栏，我在那里标记了黑十字，以及覆盖是如何显示的叠加输出

*注意：stackblitz的例子是在angular 9上，而我正在处理angular 11*

Answer 1

问题似乎与引导程序/材料有关。您已经添加了引导程序和材料包，并在style.css.中添加了以下css

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

然而，您还没有在项目中的任何地方包含材质css。添加以下行，您的问题将得到解决。

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

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