Javascript Mat对话框未在浏览器的全屏模式下显示

我有一个组件

viewmg

，它有三个部分，如下所示：

标题

主景区

页脚

标题有两个操作图标：

delete

和

add

。主区域显示图像以及一些操作按钮，这些按钮是

全屏

，

放大

，和

缩小

。页脚有提交、保存和预览按钮

单击

delete

图标，将打开一个

mat对话框

，询问是否删除图像。当我在正常的流程中工作时，它工作得非常好。但只要我点击主区域中的

全屏

操作按钮。整个组件与所有三个组件一起进入全屏模式。现在，在全屏模式下，如果我点击

delete

图标，它不会显示

mat对话框

。但一旦我退出全屏模式，我就可以看到

mat对话框打开了

我希望
mat对话框也以全屏模式显示。有人能帮我吗

以下是my components的代码片段：

viewmg组件（viewmg.Component.html）

删除确认对话框组件（ConfirmDialog.Component.html）


{{data.title}}
取消
{{data.yesText | |'Confirm'}
{{data.message}

删除确认对话框组件（ConfirmDialog.Component.ts）

从'@angular/core'导入{Component，Inject}；
从“@angular/material/DIALOG”导入{MatDialogRef，MAT_DIALOG_DATA}；
@组成部分({
选择器：“应用程序确认对话框”，
templateUrl:“./confirm dialog.component.html”，
样式URL:['./确认对话框.component.scss']
})
导出类ConfirmDialogComponent{
建造师(
@注入（材料对话框数据）
公共数据：{message:string；title？:string；onConfirm？：函数，contentTemplate？，yesText？：string}，
公共dialogRef:MatDialogRef，
) {}
继续{
if（this.data.onConfirm）{
this.data.onConfirm（（）=>{
此.dialogRef.close（'confirm'）；
})
}否则{
此.dialogRef.close（'confirm'）；
}
}
}

请帮助我了解如何在全屏模式下单击删除时显示删除对话框

另外，如果您需要更多信息，请告诉我

谢谢大家!
 仅全屏对话框容器
更改此行
this.containerElem.nativeElement.requestFullscreen（）
by
this.document.getElementsByClassName（'cdk-overlay-container'）[0].requestFullscreen（）

只全屏显示所需容器的想法；在本例中，对话框位于div内部，带有类
cdk覆盖容器。


原始答案
您好，您可以在
全屏功能的
视图img.component.ts
文件中找到答案

因为您只要求当前对话框全屏显示，但是，如果您希望其他对话框也全屏显示，您应该从两个对话框的容器中请求全屏显示

更改此行
this.containerElem.nativeElement.requestFullscreen（）
by
this.document.getElementsByTagName（'body'）[0].requestFullscreen（）

下面是一个最简单的工作示例（如果您在新选项卡上打开，而不是在stackblitz中打开，它应该可以工作）：


打开一个新选项卡：
源代码stackblitz：
但我想在另一个组件中使用此组件。我只想全屏显示这个组件。但是执行
this.document.getElementsByTagName（'body'）[0].requestFullscreen（）
将增加整个页面，而不仅仅是
查看img
组件。让我编辑我的答案。仅全屏显示覆盖容器
<div class="container" #container>
  <div class="header-row flex-row ai-center">
    <div class="title">HelloWorld.jpg</div>
    <div class="separator"></div>
    <mat-icon
      class="btn-icon"
      aria-hidden="false"
      aria-label="delete resource"
      (click)="$event.stopPropagation(); deleteScript()"
    >
      delete
    </mat-icon>
    <mat-icon
      class="btn-icon"
      aria-hidden="false"
      aria-label="add resource"
      (click)="$event.stopPropagation(); openGalleryDialog()"
    >
      add
    </mat-icon>
  </div>

  <div>
    <div class="resource-scroll-container">
      <div
        class="resource-scale-container flex-row ai-center jc-center"
        [style.transform]="'scale(' + zoom + ')'"
        [style.transform-origin]="zoom > 1 ? '0 0' : 'inherit'"
      >
        <div class="resource-view-port">
          <div class="resource-wrapper">
            <div>
              <img
                #image
                class="resource-image"
                [src]="resource.url"
                (load)="onImageLoad()"
              />
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="toolkit-wrapper" [class.hide]="hideImage">
      <app-main-view
        (action)="onToolkitAction($event)"
        [cropAreaDrawn]="cropAreaDrawn"
      ></app-main-view>
    </div>
  </div>

  <div class="action-button-row flex-row">
    <button mat-flat-button class="btn-primary">Preview</button>
    <button mat-flat-button class="btn-primary">Save</button>
    <button mat-flat-button class="btn-primary">Submit</button>
  </div>
</div>


@ViewChild("container", { static: true }) containerElem: ElementRef;

//function to fullscreen the component
private _fullScreen() {
    this.containerElem.nativeElement.requestFullscreen();
}

private _removeFullScreen() {
    document.exitFullscreen();
}

//function to open up the delete dialog box
deleteScript() {
    const self = this;
    this.dialog.open(ConfirmDialogComponent, {
        data: {
            message: `Do you want to delete ?`,
            onConfirm: (cb) => {
                console.log("Deleted!");
                cb();
                self._changeDetectRef.detectChanges();
            },
            title: "Delete",
            trigger: this.containerElem,
        },
        autoFocus: false,
    });
    this._changeDetectRef.detectChanges();
}

<div class="confirm-dialog-content">
  <h2 *ngIf="data.title" mat-dialog-title>{{ data.title }}</h2>
  <mat-dialog-content>
    <ng-container *ngTemplateOutlet="data.contentTemplate || defaultContentTemplate">
    </ng-container>
  </mat-dialog-content>
  <mat-dialog-actions>
    <button class="btn-rounded btn-secondary" mat-button [mat-dialog-close]="false">Cancel</button>
    <button class="btn-rounded btn-primary" mat-button (click)="proceed()">{{data.yesText || 'Confirm'}}</button>
  </mat-dialog-actions>
</div>

<ng-template #defaultContentTemplate> {{ data.message }} </ng-template>

import { Component, Inject } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';

@Component({
  selector: 'app-confirm-dialog',
  templateUrl: './confirm-dialog.component.html',
  styleUrls: ['./confirm-dialog.component.scss']
})
export class ConfirmDialogComponent {

  constructor(
    @Inject(MAT_DIALOG_DATA)
    public data: { message: string; title?: string; onConfirm?: Function, contentTemplate?, yesText?: string },
    public dialogRef: MatDialogRef<ConfirmDialogComponent>,
  ) {}

  proceed() {
    if (this.data.onConfirm) {
      this.data.onConfirm(() => {
        this.dialogRef.close('confirm');
      })
    } else {
      this.dialogRef.close('confirm');
    }
  }

}