0

当我单击像此示例这样的按钮时，我尝试向组件添加叠加层：
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>

在这张图片中，红色标记是我希望显示叠加层的位置，黑色标记是它实际所在的位置。
检查覆盖

编辑：

这是在 stackblitz 项目中重现的问题（覆盖按钮在第 1 部分导航链接中）：
https

://stackblitz.com/edit/angular-crud-deborahk-axtfg7?file=src%2Fapp%2Fapp.module.ts 我还发现覆盖不起作用，它不仅是侧边栏问题，我可以单击覆盖按钮，并且它会一遍又一遍地创建模板。
在这里你可以看到我的侧边栏，我在其中标记了黑色十字，以及叠加层是如何显示的 叠加层输出


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

1 回答 1

0

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

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

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

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

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

于 2020-12-22T14:52:59.527 回答