Angular Elements发出的数值在JS事件监听器中转为字符串的问题

这个类型转换和浏览器原生事件能力无关，原生CustomEvent本身支持通过detail字段传递任意JavaScript类型（number、对象、数组都可以），问题根源是Angular Elements的默认设计逻辑：

• 早期Angular Elements（v6~v8版本）在封装Web Component时，为了兼容静态HTML中直接写内联事件属性（比如<my-comp ongroup_change="doSth()"></my-comp>）的场景，默认会把所有@Output事件携带的参数做字符串序列化，再同步到DOM Attribute和事件对象上，而DOM Attribute本身就只支持字符串类型，所以number值会被自动转成字符串。
• 即使用高版本Angular，如果你在事件回调里没有读取evt.detail，而是直接从元素的同名attribute、或者事件对象的顶层属性取值，拿到的也会是被同步过去的字符串值，而非原始emit的number类型。

按优先级从高到低选择即可：

• 优先从event.detail取值
  v9及以上版本的Angular Elements已经修复了事件payload被强制序列化的问题，@Output emit的原始值会完整透传到CustomEvent的detail属性上，不会做类型转换，直接读取这个字段即可：

  this.myAngularElement.addEventListener('group_change', evt => {
    const groupId = evt.detail;
    console.log(typeof groupId); // 输出number，符合预期
  });
  

• 升级Angular版本到9+
  新版本不仅修复了事件类型转换的bug，对Web Component标准的兼容性也更好，没有特殊兼容需求的话直接升级是成本最低的方案。
• 旧版本自定义事件派发逻辑
  如果受项目限制没法升级Angular版本，可以在注册自定义元素的时候重写对应事件的派发逻辑，强制传递原始值到事件detail：

  import { createCustomElement } from '@angular/elements';
  
  const customEl = createCustomElement(YourComponent, { injector });
  // 重写group_change事件的派发逻辑，跳过字符串序列化
  const eventConfig = customEl.prototype.ngElementStrategy.events.get('group_change');
  eventConfig.emit = (value: number) => {
    const evt = new CustomEvent('group_change', {
      detail: value, // 直接传入原始number值
      bubbles: true,
      composed: true // 允许穿透Shadow DOM
    });
    eventConfig.element.dispatchEvent(evt);
  };
  customElements.define('my-angular-element', customEl);
  

• 兜底手动转类型
  如果组件代码没法修改，也可以在监听侧做一层类型转换兜底，注意处理非法值：

  this.myAngularElement.addEventListener('group_change', evt => {
    const rawVal = evt.detail ?? evt.target.getAttribute('group_change');
    const groupId = Number(rawVal);
    if (!Number.isNaN(groupId)) {
      // 后续业务逻辑用groupId即可，为正确的number类型
    }
  });
  

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