ngx-toastr在requestFullscreen全屏模式下无法显示问题求助

问题根源在于ngx-toastr默认将提示元素挂载到<body>标签下，而调用requestFullscreen()后，浏览器生成的全屏容器层级优先级高于普通body元素内的内容，导致toast被遮挡。Angular Material的Snackbar能正常显示是因为FullscreenOverlayContainer会自动将提示元素插入到全屏容器内部，而ngx-toastr没有这个自动适配逻辑，需要手动处理。

下面是几种可行的解决方案：

方法一：调用toastr时指定挂载容器 #

在触发全屏的组件中，先通过@ViewChild获取全屏容器的引用，然后在调用toastr时通过hostElement配置项将提示挂载到该容器内：

1. 获取组件容器引用并配置toastr：

import { ViewChild, ElementRef } from '@angular/core';
import { ToastrService } from 'ngx-toastr';
import { MatSnackBar } from '@angular/material/snack-bar';

@Component({
  selector: 'app-your-component',
  template: `
    <div #fullscreenContainer>
      <!-- 你的组件内容 -->
      <button (click)="showNotifications()">显示提示</button>
    </div>
  `
})
export class YourComponent {
  @ViewChild('fullscreenContainer') fullscreenContainer!: ElementRef;

  constructor(
    private toastService: ToastrService,
    private snackBar: MatSnackBar
  ) {}

  async enterFullscreen() {
    await this.fullscreenContainer.nativeElement.requestFullscreen();
  }

  showNotifications() {
    // 将toast挂载到全屏容器内部
    this.toastService.warning('Saved changes cannot be edited.', undefined, {
      hostElement: this.fullscreenContainer.nativeElement
    });
    
    this.snackBar.open('Snack bar opened', 'OK', { duration: 5000 });
  }
}

方法二：全局监听全屏事件动态配置toastr #

如果希望所有toast在全屏状态下都自动适配，可以监听fullscreenchange事件，动态修改toastr的默认挂载容器：

import { ToastrService } from 'ngx-toastr';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  template: '<router-outlet></router-outlet>'
})
export class AppComponent implements OnInit {
  constructor(private toastr: ToastrService) {}

  ngOnInit() {
    document.addEventListener('fullscreenchange', () => {
      const fullscreenElement = document.fullscreenElement;
      // 切换全屏状态时更新toastr的默认挂载目标
      this.toastr.toastrConfig.hostElement = fullscreenElement || document.body;
    });
  }
}

方法三：通过CSS强制提升层级（不推荐） #

这种方法依赖CSS层级覆盖，可能存在浏览器兼容性问题，仅作为备选方案：

在全局样式文件（如styles.css）中添加：

.toast-container {
  z-index: 999999 !important;
  position: fixed !important;
}

注意：浏览器的全屏容器拥有特殊的层级优先级，CSS方法可能在部分浏览器中失效，优先推荐前两种方法。

内容的提问来源于stack exchange，提问作者reed richards