Angular Материал: всплывающее окно Windows: Разрешить от Windows до Go между передней и задней частью

Question

У нас есть 1) Открытие компонента диалогового окна материала 2) Другой компонент диалогового окна материала, когда пользователь нажимает кнопку «Открыть расширенный поиск».

Первый компонент диалогового окна находится в фиксированной позиции. Второй компонент Dialog является подвижным, но не может go позади первого исходного.

Как это сделать, пользователи могут поменять местами заднее или переднее положение обоих windows, как обычно Windows 10 настольное приложение, в зависимости от того, что было нажато / перетащено последним?

Второй компонент:

public openAdvancedPropertySearchDialog(): void {
    const advancedApnSearchDialogRef = this.advancedApnSearchDialog.open(DocumentPropertyGridComponent, {
      width: '800px',
      height: '450px',
      disableClose: true,
      autoFocus: false,
      data: "test"
      hasBackdrop: false
    });
    advancedApnSearchDialogRef.afterClosed().subscribe(result => {});
  }

HTML Код для второго компонента: , который является перемещаемым: диалоговое окно первого компонента в идеале должно быть в фиксированном положении

<div mat-dialog-title cdkDrag cdkDragRootElement=".cdk-overlay-pane" cdkDragHandle>
  <div class="row">
    <button class="dialog-button close-button" mat-button (click)="onCancel()">X</button>
  </div>
  <app-document-property-grid></app-document-property-grid>  
</div>

*If its only possible both components be movable with cdkDrag, rather than first Modal window being fixed, that can be accepted as answer .

Resource:

Как сделать MatDialog перетаскиваемым / Angular Материал

Answer 1

Это приблизительный ответ, но perhafs может вас вдохновить

Вы можете присвоить один «id» разный для каждого MatDialog (и передать как элемент данных)

const dialogRef = this.dialog.open(YourComponentDialog, {
      width: '250px',
      data: {data: test, id:'child'}, //<--this
      disableClose:true,
      hasBackdrop:false,
      id:'child' //<--this 

    });

If в конструкторе компонентов, которые вы вводите OverlayContainer

constructor(public cdk:OverlayContainer,...){}

Вы можете создать функцию toTop, которая получит «id»

  toTop(id)
  {
    this.cdk.getContainerElement().childNodes.forEach((x:any)=>{
      if (x.innerHTML.indexOf('id="'+id+'"')<=0)
        x.style["z-index"]=1000;
      else
        x.style["z-index"]=1001;
    })
  }

Просто вызовите функцию в (щелкните) -вы может вызвать функцию, только если вы щелкнете заголовок или в нескольких местах.

a stackblitz

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