Angular Material:弹出窗口:允许窗口在前后之间移动 [英] Angular Material: Popup Windows : Allow Windows to Go Between Front and Back

问题描述

我们有 1) 材质对话框组件打开 2) 另一个材质对话框组件，当用户按下Open Adv.搜索"按钮.

第一个 Dialog 组件处于固定位置.第二个 Dialog 组件是可移动的，但还不能落后于第一个原始组件.

如何做到这一点，用户可以交换两个窗口的背面或正面位置，就像典型的 Windows 10 桌面应用程序一样，取决于最后单击/拖放的内容?

第二部分:

public openAdvancedPropertySearchDialog(): void {const advancedApnSearchDialogRef = this.advancedApnSearchDialog.open(DocumentPropertyGridComponent, {宽度:'800px'，高度:'450px'，禁用关闭:真，自动对焦:假，数据:测试"有背景:假});advancedApnSearchDialogRef.afterClosed().subscribe(result => {});}

第二个组件的 HTML 代码: 这是可移动的:理想情况下，第一个组件对话框应该在固定位置

<div class="row"><button class="dialog-button close-button";mat-button (click)=onCancel()">X</button>
<app-document-property-grid></app-document-property-grid>

*如果只有两个组件都可以通过 cdkDrag 移动，而不是第一个 Modal 窗口被固定，则可以接受作为答案.

资源:

如何制作可拖动的 MatDialog/Angular Material

解决方案

这是一个大概的回应，但 perhafs 可以启发你

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

const dialogRef = this.dialog.open(YourComponentDialog, {宽度:'250px'，data: {data: test, id:'child'},//<--this禁用关闭:真，有背景:假，id:'child'//<--this});

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

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

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

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

只需简单地调用 (click) 中的函数 - 只有单击标题或在多个位置才能调用该函数.

a stackblitz

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

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

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

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?

Second Component:

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

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

Resource:

How can i make a MatDialog draggable / Angular Material

解决方案

This is an aproximate response, but perhafs can inspirated you

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 

    });

If in constructor of the components you inject OverlayContainer

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

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

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