Как получить текущую позицию диалогового окна Angular Материал - PullRequest
Новая
       14

Как получить текущую позицию диалогового окна Angular Материал

0 голосов
/ 08 апреля 2020

Я пытаюсь получить размеры экрана только что открытого Angular Материала. Каков наилучший способ сделать это?

Справочная информация: Я использую Angular Материал 5.2.5 и не могу выполнить обновление. Если диалоговое окно слишком высокое для окна, оно обрезается сверху и снизу, и нет возможности добраться до кнопок действий внизу. См. Проблемы с позицией и размером диалога на GitHub.

Когда откроется диалоговое окно, я хотел бы проверить его положение, чтобы увидеть, находится ли какая-либо его часть за пределами экрана. Если это так, я буду применять класс, чтобы сделать диалоговое окно полноэкранным и настроить прокручиваемые части, чтобы пользователи могли получить все. (Другие идеи приветствуются.)

Что я пробовал:

1. Я попытался использовать переменную шаблона для элемента оболочки: 

<button mat-raised-button (click)="showDialog()">Click me to show dialog</button>

<ng-template #dialogTemplate>
  <div #dialogFrame class="dialog-frame">
    <div> ... dialog content ... </div>
  </div>
</ng-template>

Затем в функции showDialog() компонента: 

...
export class dialogButtonComponent implements OnInit {
  @ViewChild('dialogTemplate') private dialogModal: TemplateRef<any>;
  @ViewChild('dialogFrame', {read: ElementRef}) private dialogFrame: ElementRef;
  ...
  showDialog(config: MatDialogConfig = {}) {
    this.dialogRef = this.dialog.open(this.dialogModal, dialogConfig);
    const box = this.dialogFrame.nativeElement.getBoundingClientRect();
      // this.dialogFrame is undefined when this executes
  }
}

2. Основываясь на этом ответе , я попытался ввести MatDialogContainer, чтобы получить ссылку:

Нам также нужно ввести MatDialogContainer в нашу директиву, чтобы мы могли получить начальную позицию диалога контейнер. Мы должны вычислить начальное смещение, потому что Angular библиотека материалов использует flex для центрирования диалога, и она не дает нам заданные c значения верхнего / левого.

В частности: 

const box = this.container['_elementRef'].nativeElement.getBoundingClientRect();

Где this.container - это введенный MatDialogContainer. Я пытался сделать это в моем компоненте, но с трудом вводил его. Я не так много работал с директивами, поэтому я изучаю это.

3. В dialogRef, возвращенном после открытия диалогового окна, получите доступ к dialogRef._containerInstance._elementRef: 

...
const dialogRef = this.dialog.open(this.overlayModal, dialogConfig);
const dialogBoxElement = dialogRef._containerInstance._elementRef;

// dialogBoxElement now has an ElementRef that I can call getBoundingClientRect() on.

Это на самом деле работает локально, но не будет построено. Проблема в том, что есть ошибка Typescript, потому что " Свойство '_elementRef' является закрытым и доступно только в классе 'MatDialogContainer'. "

Я надеюсь, что есть более простой способ получить координаты экрана диалогового окна Angular Материал. Есть идеи?

...