Angular 材质：弹出窗口：允许在原始窗口中单击并且不要灰显

Posted 2023-05-08

【中文标题】Angular 材质：弹出窗口：允许在原始窗口中单击并且不要灰显

【英文标题】：Angular Material: Popup Windows : Allow Click in Original Window and Do Not Grey Out

【发布时间】：2020-10-29 12:39:36

【问题描述】：

尝试使用 Angular 材质对话框或任何弹出窗口组件。让它部分工作。

要求：

a) 返回原始屏幕不应灰显，

b) 用户允许在其后面的原始第一个窗口中单击返回

c) 最后，想将数据发送回原来的窗口组件。 （这对我们有用）

只是它应该是常规弹出窗口。 这如何在 Angular Material 对话框中完成？好像是锁屏了。

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

    advancedApnSearchDialogRef.afterClosed().subscribe(result => 

    );
  

我们可以使用 javascript window.open，但更喜欢提供完整数据绑定通信服务的 Angular Material。 如果有另一个 Angular 选项，也可以作为答案。

资源：

How can i make a MatDialog draggable / Angular Material

更新：

目前在 Material Dialog 中测试 hasBackdrop: false，这可以作为答案吗？

【问题讨论】：

只是在 Material Dialog 中测试 hasBackdrop: false，这可以作为答案吗？

这样有效吗？

【参考方案1】：

试试这个。通过添加hasBackdrop true 或 false 你可以实现你想要的

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

    );