如何在角度中使用单个组件作为页面和 MatDialog

Posted 2023-03-13

【中文标题】如何在角度中使用单个组件作为页面和 MatDialog

【英文标题】：How to use single component as page and MatDialog in angular

【发布时间】：2020-06-02 02:27:33

【问题描述】：

如何使用单个组件作为页面并作为组件打开 MatDialog 如果从 MatDialog 调用需要双向数据绑定 如果作为页面打开则不需要绑定数据

从组件调用 ```var modal = this._dialog.open(SingleComponent, 数据：创建：真 );'''

单组件

```@Component(
  selector: 'single',
  templateUrl: './single.html',
  styleUrls: ['./single.scss'],
  providers: [
     provide: MatDialogRef,
     useValue: close: (dialogResult: any) =>  
  , provide: MAT_DIALOG_DATA, useValue:  ]

) 构造函数（ 公共 dialogRef：MatDialogRef， @Optional() @Inject(MAT_DIALOG_DATA) 公共数据：任意) ```

这在页面和模态框中都打开，但无法在组件和单个组件之间绑定数据，并且无法从代码中关闭 this.dialogRef.close(); 不工作

【参考方案1】：

声明dialogRef: MatDialogRef<SingleComponent>;

 this.dialogRef = this.dialog.open(SingleComponent,  data:  create: true  );

 this.dialogRef.afterClosed().subscribe(result => 
      this.dialogRef = null;
    );

在single.component.ts添加这个

import MAT_DIALOG_DATA from '@angular/material';

@Inject(MAT_DIALOG_DATA) public data: any

你可以在单个组件中使用值 data.

【讨论】：

我已经添加了，它仅在从 matdialoge 加载单个组件时工作，如果它作为页面加载则不工作

【参考方案2】：

我已经为你提到的用例创建了 stackblitz，你可以通过一次

Stackblitz

如果您编写的代码在控制台中出现静态注入错误，您可以添加以下行来修复该错误

在 app.module.ts 中

providers: [
    provide: MatDialogRef, useValue:  ,
    provide: MAT_DIALOG_DATA, useValue: [] 
  ]

希望对你有帮助！

【讨论】：

是的工作！，我也试过这个，但我在单个组件中添加了这个，这就是它不起作用的原因，谢谢

你的意思是说，你试图从单个组件打开单个组件作为模态？

不，我需要在模态和页面中打开单个组件，提供者：[提供：MatDialogRef，useValue：，提供：MAT_DIALOG_DATA，useValue：[]]我添加此代码在单个组件中，这就是它不起作用的原因，在添加到 app.module.ts 之后它起作用了

如果是这样的话，上面的stackblitz应该没问题吧。还缺少什么？

Stackblitz 链接已失效