Question

我有一个现有组件ResultGridComponent，该组件由@Input()传递数据。我想为MatDialog使用相同的组件。因此，我在@Inject(MAT_DIALOG_DATA) data组件的构造函数中添加了ResultGridComponent。

constructor(private spinner: EdpLoaderService, private dialog: MatDialog, @Optional() @Inject(MAT_DIALOG_DATA) data) {}

但是当按常规用法而不是对话框调用组件时，出现以下错误：

错误错误：StaticInjectorError（AppModule）[ResultGridComponent-> InjectionToken MatDialogData]： StaticInjectorError（平台：核心）[ResultGridComponent-> InjectionToken MatDialogData]： NullInjectorError：没有InjectionToken MatDialogData提供程序！

我很确定我已经导入了所有需要的模块。因为我为对话框创建了一个单独的组件并将数据传递给它，所以它运行良好。但是我想重用该组件。而且我非常确定，当我将子组件的构造函数调用为常规组件并且构造函数没有获得调用者传递给它的MatDialogData时，就会出现此错误。

Answer 1

我能够找到解决方案。

问题陈述：我试图在2个不同的地方使用现有的组件（我们称其为ChildComponent）。一个作为常规子组件，第二个作为“材质对话框”中的组件。

挑战：要将数据传递到对话框组件，我们需要在子组件中使用@Inject（MAT_DIALOG_DATA）。但是，当将ChildComponent注入常规组件内部时，不会为'@Inject（MAT_DIALOG_DATA）'提供任何提供程序。因此，它在启动时会失败。如果要在Mat对话框中使用ChildComponent，我们确实需要'@Inject（MAT_DIALOG_DATA）'。

解决方案： 1.创建一个包装器组件，让我们对其进行调用（ChildWrapperComponent）。对于常规用例，直接将ChildComponent注入父组件中。对于Mat对话框用例，提供ChildWrapperComponent

const dialogRef  = this.dialog.open(ChildWrapperComponent, {
                 width: '90%',
                 disableClose: false,
                 data: {
                   fileName: this.fileName,
                   results: this.results
                 }
               } );

现在您可以使用@Inject（MAT_DIALOG_DATA）数据在ChildWrapperComponent内部保存数据

constructor(private spinner: EdpLoaderService, private dialog: MatDialog,
@Inject(MAT_DIALOG_DATA) data,
private dialogRef: MatDialogRef<ChildWrapperComponent>) {
this.setInputData(data);

}

一旦您在ChildWrapperComponent中拥有数据，就将子组件注入Wrapper中并使用@Input（）传递数据。

我没有尝试其他解决方案，但是可以将服务用于相同的数据交换，但我只是想走一条艰难的路：P。

我是Angular的新手。高度赞赏更好或其他解决方案。

Answer 2

您是否在导入中包含MatDialog模块？

Answer 3

在某些情况下，我会在@Inject（MAT_DIALOG_DATA）之前使用@Optional（）。

  constructor(
    @Optional() @Inject(MAT_DIALOG_DATA) dialogData: any
  ) {
    if (dialogData) {
     // here pass dialog data to the child component
    }
  }

Answer 4

在阅读dependency-injection-providers

之后，我通过添加这样的提供程序解决了该问题

javax.persistence.OrderBy

此后，如果我的组件定期加载，则从路由解析器读取数据；如果在另一个组件的对话框中加载，则从注入的@Component({ ... ... providers: [ { provide: MatDialogRef, useValue: this }, ] })读取数据。

重用材质对话框中的现有角度组件

4 个答案: