Question

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

从组件调用 ``var modal = this._dialog.open（SingleComponent，{ 数据：{create：true} }）;'''

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();无法正常工作

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

Answer 2

我为您提到的用例创建了stackblitz，您可以进行一次遍历

Stackblitz

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

在app.module.ts

中

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

希望有帮助！

如何在角

2 个答案: