Положение MatDialog относительно запускающего элемента - PullRequest
Новая
       15

Положение MatDialog относительно запускающего элемента

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

У меня есть matdialog, который я пытаюсь расположить относительно элемента, который его запускает.

mainComponent.ts 

openDialog() {
const element = document.getElementById('btn');
const myDialog = this.dialog.open(DialogComponent, {
  width: '500px',
  height: '500px',
  data: {
    something,
    something: something
  },
  position: { top: `${element.top + 5}px`, right: `${element.right + 5}px` }
});

К сожалению, это делает не размещайте диалоговое окно рядом с моим триггерным элементом, оно просто выбрасывает его случайным образом на веб-странице.

Кроме того, у меня нет службы диалога и я не собираюсь ее создавать.

Кто-нибудь знает, как это исправить?

Большое спасибо!

Ответы [ 2 ]

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

используйте getBoundingClientRect 

const element=document.getElementById('btn');
const rect=element?element.getBoundingClientRect():{top:0,left:0}
const dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
  width: '250px',
  data: {name: this.name, animal: this.animal},
  position:{top:(rect.top+5)+'px',left:(rect.left+5)+'px'}
});

ПРИМЕЧАНИЕ. Вы также можете передать ссылочную переменную и использовать 

<button #bt mat-raised-button (click)="openDialog(bt)">Pick one</button>

//and 
openDialog(bt:any): void {
  const element=bt._elementRef.nativeElement
  const rect=element?element.getBoundingClientRect():{top:0,left:0}
  ...
}

см. stackblitz

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

Диалоги не предназначены для открытия относительно элемента. Overlay подойдет вам лучше, так как поддерживает различные стратегии Position и Scroll . В вашем случае вы можете использовать FlexibleConnectedPositionStrategy , например: 

const positionStrategy = this.overlay.position()
    .flexibleConnectedTo(someElement)
    .withDefaultOffsetX(10);

this.overlayRef = this.overlay.create({
    positionStrategy: positionStrategy
});

...
...