在材质对话框中重用现有的 Angular 组件

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(Platform: core)[ResultGridComponent -> InjectionToken MatDialogData]：NullInjectorError：InjectionToken MatDialogData 没有提供者！

我很确定我已经导入了所有需要的模块。因为我为对话框创建了一个单独的组件并将数据传递给它并且它工作正常。但我想重用该组件。而且我很确定当我将子组件的构造函数调用为常规组件并且构造函数没有得到MatDialogData调用者传递给它的时候，这个错误就会发生。

Answer 1

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

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

Answer 2

我能够找到解决这种情况的方法。

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

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

解决方案：创建一个包装组件，我们称之为（ChildWrapperComponent）。对于常规用例，直接将 ChildComponent 注入父组件中。而对于 Mat Dialog 用例，请提供 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() 传递数据。

我是 Angular 的新手。非常感谢更好或不同的解决方案。