角材料:弹出窗口:允许窗口在正面和背面之间移动 [英] Angular Material: Popup Windows : Allow Windows to Go Between Front and Back

问题描述

我们有1)打开材料对话框组件2)当用户按打开高级"时，另一个材料对话框组件.搜索"按钮.

We have 1) Material Dialog Component Opening up 2) Another Material Dialog Component, when user press "Open Adv. Search" Button.

第一个对话框组件处于固定位置. 第二个Dialog组件是Movable，但是还不能落后于第一个原始组件.

The first Dialog component is in fixed position. The second Dialog component is Movable, however cannot go behind first original one yet.

如何做到这一点，用户可以像最后一个Windows 10桌面应用程序那样，互换两个窗口的后位置或前位置，这取决于单击/最后拖动/拖放的内容是什么?

How to make it so, users can interchange the back or front positions of both windows, like typical Windows 10 desktop app, depending on what is clicked/drag/drop last?

第二部分:

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代码:，它是可移动的: 理想情况下，第一个组件对话框"应固定在固定位置

HTML Code for Second Component: which is Movable: First Component Dialog should be in fixed position ideally

<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>

*如果两个组件都只能通过cdkDrag进行移动，而不是固定第一个Modal窗口，则可以将其作为答案.

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

资源:

如何使MatDialog可拖动/角材料

推荐答案

这是一个近似的答案，但是行为可能会启发您

This is an aproximate response, but perhafs can inspirated you

您可以将一个"id"分配给每个MatDialog都不同(并作为数据元素传递)

You can assing one "id" different for each MatDialog (and pass as element of the data)

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

    });

如果在组件的构造函数中注入OverlayContainer

If in constructor of the components you inject OverlayContainer

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

您可以创建一个toTop函数来接收"id"

You can create a function toTop that receive the "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;
    })
  }

只需在(单击)中调用该函数-仅在单击标题或在多个位置时才可以调用该功能.

Just simply call to the function in (click) -you can call the funciton only if you click the title or in several places.

a stackblitz

注意:如果父级打开子级，则将其存储在变量中.因此，在打开子级之前，请检查变量，如果变量已打开，只需将其发送到顶部

NOTE: store in a variable if the parent open the child. so before open the child, check the variable and if is open simply send it to top

这篇关于角材料:弹出窗口:允许窗口在正面和背面之间移动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！