ngx-toastr 无法在全屏模式下工作（requestFullscreen()）

Question

我正在使用 requestFullscreen() MDN 参考 全屏查看我的组件。 我在此组件中有一个按钮，单击该按钮会显示一条 toast 消息（使用 ngx-toastr），在正常模式下一切正常，但在全屏模式下，该 toastr 位于容器后面（当前使用 requestFullscreen 显示为覆盖层（ ））。 我尝试添加

provide: OverlayContainer, useClass: FullscreenOverlayContainer 

作为 app.module 中的提供者，这允许我显示来自

@angular/material/snack-bar

的烤面包机消息，但来自

ngx-toast

的 toastr 消息没有变化。

import { ToastrService } from 'ngx-toastr';
import { MatSnackBar } from '@angular/material/snack-bar';
...
...

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

按钮点击功能内

this.toastService.warning('Saved changes cannot be edited.');  
      this.snackBar.open('Snack bar opened', 'OK', {
        duration: 5000
      });

此处未显示第一个 toastr，而显示第二个 toastr

Answer 1

我们可以通过在自定义组件中显示我们的toastr来实现这一点ngx-toastr read.me

应用程序模块

import { ToastContainerDirective, ToastrModule } from 'ngx-toastr';
.
.
.
@NgModule({
imports: [
        ToastrModule.forRoot(),
        ToastContainerDirective
    ],
)}

在html模板中添加

toastContainer

<div fullscreen>
 <div toastContainer aria-live="polite"></div>
</div>

在 ts 组件文件中

constructor(private toastService: ToastrService){}

@ViewChild(ToastContainerDirective, { static: true })
  toastContainer: ToastContainerDirective;

ngOnInit(): void {

    this.toastService.overlayContainer = this.toastContainer

这些更改允许我在全屏模式下使用 ngx-toastr。 我在这里所做的基本上是在 div 中显示 toastr，该 div 是具有全屏功能的 div 的子级