角度材料：snackbar隐藏在具有高z-index的组件后面

Question

所以我正在玩Angular一点，我想在我的应用中添加材料零食栏，以便我的应用程序出现错误。

所以，我有我的hompage，我的导航是一个覆盖，z-index为3000.在导航中有登录选项（见下图）。我故意输入错误的登录数据以触发错误处理程序并使快餐栏出现。

小吃吧确实出现了。但是，它隐藏在导航背后。如何让它显示在导航上方？我尝试使用以下代码将x-index为10000添加到处理小吃栏的组件的scss中：

* {
z-index: 10000;
}

和

::root {
z-index: 10000;
}

但都没有效果。有谁知道如何做到这一点？

App.component.ts：用户导航是我处理登录的地方。通知包含快餐栏的逻辑

<navigation></navigation>
<user-navigation>

</user-navigation>
<router-outlet></router-outlet>
<notifications></notifications>

Notifications.component.ts，这个工作，它打开小吃店，但它隐藏在用户导航后面

import { Component, OnInit } from '@angular/core';
import {MatSnackBar} from '@angular/material';
import {NotificationService} from '../services/notification.service';

@Component({
  selector: 'notifications',
  templateUrl: './notifications.component.html',
  styleUrls: ['./notifications.component.css']
})
export class NotificationsComponent implements OnInit {

  constructor(public snackBar: MatSnackBar, private notificationService: NotificationService) { }

  ngOnInit() {
    this.notificationService.notification$
        .subscribe((message) => {
          console.log('received the notification', message);
          this.openSnackBar(message);
        });
  }

  openSnackBar(message: string, action?: string) {
    setTimeout(() => {
      this.snackBar.open(message, action, {
        duration: 20000
      });
    }, 0);
  }
}

这是登录页面。由于我为导航提供了高z-index，因此主页位于此后面并且不可见

这是关闭导航时的主页。小吃栏是可见的，但我希望能够在导航打开的情况下看到它

Answer 1

你可以试试覆盖这个css类

style.css文件/ style.scss

.cdk-overlay-pane{
  z-index: 10000 !important;
}

Answer 2

难道你不能把<notifications>元素放在上面吗？

<notifications></notifications>
<navigation></navigation>
<user-navigation></user-navigation>
<router-outlet></router-outlet>

Answer 3

尝试将它放在你的base / root css文件中，如果你没有，请尝试在index.html文件中添加标签并在那里添加这个css。

 :host /deep/ .cdk-overlay-pane{
   z-index: 1000;
 }