Angular中使用Material Dialog出现SyntaxError: Expression expected错误的原因

错误原因 #

你在调用this.dialog.open()时，直接给组件类ConfirmDeleteDialogComponent附加了泛型参数<SomeDTO>，这违反了TypeScript语法规则。MatDialog.open()的第一个参数仅接受组件类本身，不允许直接在类名后添加泛型参数来指定类型。

修复方案 #

有两种常用的修复方式：

方式1：通过配置自动推导泛型 #

移除组件类后的泛型参数，借助已定义的config类型让TypeScript自动推导组件的泛型类型，代码调整如下：

if (data) {
  // 移除组件类后的<SomeDTO>泛型参数
  const dialogRef = this.dialog.open(ConfirmDeleteDialogComponent, config);
  dialogRef
    .afterClosed()
    .pipe(...)
    .subscribe();
}

由于你已将config的类型指定为MatDialogConfig<ConfirmDeleteDialogConfig<SomeDTO>>，TypeScript会自动根据配置的data类型，推导ConfirmDeleteDialogComponent的泛型T为ConfirmDeleteDialogConfig<SomeDTO>，完全匹配组件定义。

方式2：给open方法显式指定泛型 #

如果需要更清晰的类型声明，可以直接给MatDialog.open()方法指定泛型参数，而非组件类：

if (data) {
  // 给open方法指定泛型，第一个是组件类型，第二个是传入的data类型
  const dialogRef = this.dialog.open<ConfirmDeleteDialogComponent<ConfirmDeleteDialogConfig<SomeDTO>>, ConfirmDeleteDialogConfig<SomeDTO>>(
    ConfirmDeleteDialogComponent, 
    config
  );
  dialogRef
    .afterClosed()
    .pipe(...)
    .subscribe();
}

补充说明 #

你的组件构造函数中，注入的MAT_DIALOG_DATA类型为T，而传入的config.data是ConfirmDeleteDialogConfig<SomeDTO>，因此组件泛型T实际对应ConfirmDeleteDialogConfig<SomeDTO>，当前组件定义无需修改。

内容的提问来源于stack exchange，提问作者TalVik99