Так что я немного поиграюсь с Angular, и я хотел добавить в мое приложение материальную закусочную на случай, если в моем приложении будет ошибка.
Итак, у меня есть hompage, и моя навигация - это оверлей с z-индексом 3000. В навигации есть опция для входа (см. Рисунок ниже). Я специально ввел неверные данные в журнале, чтобы вызвать обработчик ошибок и заставить появиться снэк-бар.
Снэк-бар действительно появляется. Тем не менее, он скрыт за навигацией. Как сделать так, чтобы оно отображалось над навигацией? Я попытался добавить z-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-индекса, который я дал навигации
Это домашняя страница, когда я закрываю навигацию. Снэк-бар виден, но я хочу иметь возможность видеть его и при открытой навигации
