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

Question

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

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

我的网页：

<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

我对我的应用程序也有类似的要求。我重用了你的代码来演示我是如何做到的。通过这种方式，我能够在我单击的位置显示对话框。

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

Answer 2

试试这个

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

您还可以添加 top：0 等。