如何将ang-jsoneditor初始化代码迁移至Angular Input Signals？

我正在使用ang-jsoneditor包，原有初始化代码如下：

@Component({ ... })
export class AppComponent {
  public editorOptions: JsonEditorOptions;
  public data: any;
  // optional
  @ViewChild(JsonEditorComponent, { static: false }) editor: JsonEditorComponent;

  constructor() {
    this.editorOptions = new JsonEditorOptions()
    this.editorOptions.modes = ['code', 'text', 'tree', 'view']; // set all allowed modes
    ...
  }

}

我希望将其转换为Angular新的Signals输入处理方式，但不知道如何将初始化代码移入input信号的默认值中，目前尝试的代码如下：

@Component({ ... })
export class AppComponent {
  public editorOptions = input<JsonEditorOptions>({});
  public data: any = input.required();
  // optional
  editor = viewChild(JsonEditorComponent);

  constructor() {
    // how do I move this code inside the `input` default value?
    this.editorOptions = new JsonEditorOptions()
    this.editorOptions.modes = ['code', 'text', 'tree', 'view']; // set all allowed modes
    ...
  }

}

请问该如何实现？

解决方案 #

你可以直接通过工厂函数作为input()的默认值参数，在工厂函数内部完成JsonEditorOptions的初始化和配置，不需要在构造函数中重新赋值。正确的实现代码如下：

@Component({ ... })
export class AppComponent {
  // 在input的默认值工厂函数中完成配置初始化
  public editorOptions = input<JsonEditorOptions>(() => {
    const options = new JsonEditorOptions();
    options.modes = ['code', 'text', 'tree', 'view'];
    // 在这里添加其他需要的配置项
    return options;
  });
  
  // 明确指定data的类型，使用required输入
  public data = input.required<any>();
  
  // 使用Angular Signals的viewChild API
  editor = viewChild(JsonEditorComponent);
}

关键说明： #

• 使用工厂函数作为默认值，能确保每次需要默认配置时都会创建新的JsonEditorOptions实例，避免多个组件实例共享同一个配置对象导致的意外问题。
• 不需要在构造函数中修改editorOptions，因为input()已经定义了它的默认行为，父组件也可以通过输入属性传入自定义配置来覆盖默认值。
• input.required()的类型可以明确指定（比如any或你实际需要的JSON类型），让类型检查更严格。
• 新的viewChild API不需要static参数，会自动处理组件生命周期的查询时机。

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