Mat-Dialog 未在浏览器的全屏模式下显示

Question

我有一个组件viewImg，它包含以下三个部分：

1. 标题
2. 主视图区
3. 页脚

标题有两个操作图标：delete 和 add。主区域显示一个图像以及一些操作按钮，它们是 fullscreen 、 zoom-in 和 zoom-out。并且页脚有提交、保存和预览按钮。

点击delete 图标会打开mat-dialog，询问是否删除图像。当我在正常流程中工作时，这非常有效。但是只要我点击主区域中的fullscreen 操作按钮。整个组件进入全屏模式，包含所有三个组件。现在，在这个全屏模式下，如果我点击 delete 图标，它不会显示 mat-dialog 。但是一退出全屏模式，就可以看到mat-dialog打开了。

我也希望以全屏模式显示mat-dialog。有人可以帮我解决这个问题吗？

这是我的组件的代码-sn-ps：

viewImg 组件 (viewImg.component.html)

<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>

viewImg 组件 (viewImg.component.ts)（我在这里包含了所需的功能。如果您需要其他功能，请告诉我。）

@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();
}

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

<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>

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

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');
    }
  }

}

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

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

谢谢！

Answer 1

仅全屏对话框容器

将此行 this.containerElem.nativeElement.requestFullscreen(); 更改为 this.document.getElementsByClassName('cdk-overlay-container')[0].requestFullscreen();

只全屏显示所需容器的想法；在这种情况下，对话框位于类 cdk-overlay-container. 的 div 内

原答案

您好，您可以在_fullScreen 函数的viewImg.component.ts 文件中找到答案。

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

将此行 this.containerElem.nativeElement.requestFullscreen(); 更改为 this.document.getElementsByTagName('body')[0].requestFullscreen();

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

• 打开一个新标签：https://angular-ivy-knyuq6.stackblitz.io/
• 源代码stackblitz：https://stackblitz.com/edit/angular-ivy-knyuq6?file=src/app/app.component.ts