如何在按钮单击或悬停时将角度材料(2.x +)对话框定位到屏幕的右侧

Question

我已经开始用材料设计学习角度5,我的要求是我必须始终将屏幕角度材料对话框固定在屏幕的右侧.默认情况下它始终位于屏幕中央,如何在屏幕右侧显示对话框.请帮忙.

import { MatDialog, MatDialogRef, MAT_DIALOG_DATA, MatDialogConfig } from '@angular/material';

我的HTML:

<div class="add-contact-btn" fxFlex="10">
         <button mat-raised-button (click)="openDialog()">add contact</button>
     </div>

openDialog(): void {
const dialogRef = this.dialog.open(ContactsComponent, {
  width: '250px'   });
dialogRef.afterClosed().subscribe(result => {
  console.log('The dialog was closed');
});

}

Answer 1

尝试这个

const dialogRef = this.dialog.open(ContactsComponent, {
  width: '250px'
  position: { right: '0'}
});

您还可以添加 top: 0 等。

Answer 2

我对我的应用有类似的要求。我重复使用了您的代码来演示我是如何做到的。这样，我就可以在单击的位置显示对话框。

HTML：

<div class="add-contact-btn" fxFlex="10">
     <button mat-raised-button (click)="openDialog($event)">add contact</button>
</div>

脚本：

openDialog(event): void {
  const dialogPosition: DialogPosition = {
    top: event.y + 'px',
    left: event.x + 'px'
  };

  const dialogRef = this.dialog.open(ContactsComponent, {
    width: '250px',
    position: dialogPosition
  });

  dialogRef.afterClosed().subscribe(result => {
    console.log('The dialog was closed');
  });
}