Angular 17.3 input信号在自定义元素中返回值而非函数的问题

问题描述 #

升级Angular应用使用新的input信号API时，多数组件表现正常，例如声明imageID = input<number>()后可按预期调用this.imageID()获取值。但部分组件中声明caption = input<string>()后，this.caption直接返回输入值而非信号函数，调用this.caption()会触发TypeError: this.caption is not a function错误。经排查，所有出现该异常的组件均通过以下代码转为自定义元素注册：

const imgCaptionedElement = createCustomElement(ImgCaptionedComponent, { injector: this.injector });
customElements.define('img-captioned', imgCaptionedElement);

分析与解决方案 #

这并非Bug，而是Angular为适配Web Components标准对自定义元素做的特殊处理：

• 当组件通过createCustomElement转为自定义元素时，Angular会自动将信号式输入解包为直接值暴露给组件内部，同时映射为DOM元素的属性，符合Web Components通过属性传递值的规范。
• 因此在这类组件内部，无需调用this.caption()，直接使用this.caption即可获取当前输入值。
• 如果需要监听输入值变化，可使用effect函数配合信号（两种实现方式）：

  // 方式1：直接监听解包后的值变化
  effect(() => {
    console.log('Caption updated:', this.caption);
  });
  
  // 方式2：获取原始信号并监听
  caption = input<string>();
  effect(() => {
    console.log('Caption updated:', this.caption.signal());
  });
  

• 若需同时兼容组件的常规Angular使用和自定义元素使用，可添加类型判断兼容两种场景：

  getCurrentCaption(): string {
    return typeof this.caption === 'function' ? this.caption() : this.caption;
  }
  

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