如何为对话框组件实例设置基于信号的输入值？

传统@Input传值方式 #

在Angular对话框中使用组件时，传统通过@Input传递值的方式如下：

组件定义：

@Component({
  selector: 'app-foo',
  template: '{{ data }}',
})
export class FooComponent {
  @Input() data: IFooData | null = null;
}

对话框调用时传值：

const dialogRef = this.dialog.open(FooComponent);
dialogRef.componentInstance.data = ...; // 直接赋值给组件实例属性

信号式输入的传值方案 #

当组件使用Angular信号式输入时，直接赋值dialogRef.componentInstance.data会报错——因为信号式输入是只读的InputSignal，无法直接修改。此时可以使用Angular提供的setInput方法来更新信号输入，同时保持组件与对话框逻辑解耦：

信号式组件定义 #

注意模板中需要调用信号（data()）来获取当前值：

@Component({
  selector: 'app-foo',
  template: '{{ data() }}',
})
export class FooComponent {
  data = input<IFooData | null>(null);
}

对话框调用时传值 #

通过组件实例的setInput方法更新信号输入：

const dialogRef = this.dialog.open(FooComponent);
dialogRef.componentInstance.setInput('data', ...); // 指定输入属性名并传递值

说明 #

setInput是Angular 16及以上版本提供的API，专门用于更新组件的信号式输入属性，这种方式既满足了对话框传值的需求，又不会让FooComponent依赖对话框相关的MAT_DIALOG_DATA，保持了组件的通用性。

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