Angular Elements打包为脚本引入普通HTML后是否支持Input数据绑定？

核心结论 #

支持Input数据绑定，但不能使用Angular模板专属的方括号[]绑定语法，普通HTML/JavaScript环境没有Angular的模板解析器，无法识别该语法，需使用原生自定义元素的属性赋值方式。

失效原因说明 #

你写的<my-element [random]="true"></my-element>属于Angular项目模板内的专用绑定语法，仅会被Angular编译器解析处理，普通HTML环境会将[random]识别为一个普通的自定义HTML属性，不会触发Angular Element的Input更新逻辑。

正确绑定方式 #

Angular Element构建的自定义元素会自动将@Input()声明的属性映射为DOM元素的标准DOM属性，你可以通过两种方式赋值：

1. 静态布尔值赋值 #

如果是固定传true，可以直接使用原生HTML布尔属性写法：

<!-- 只要写了random属性，Angular Element就会识别为true -->
<my-element random></my-element>

如果需要固定传false，不写该属性即可，默认会使用你Angular代码里定义的初始值false。

2. 动态赋值（推荐，可精准控制类型） #

通过JavaScript操作DOM属性赋值，这种方式可以准确传递布尔、数字等非字符串类型，不会出现类型转换问题：

<!-- 先声明自定义元素 -->
<my-element id="myEle"></my-element>
<button id="toggleBtn">切换random值</button>

<script>
// 页面加载完成后获取元素，直接给DOM属性赋值
window.onload = function() {
  const ele = document.getElementById('myEle');
  // 直接赋值布尔值，会自动触发@Input对应的setter逻辑
  ele.random = true;
  
  // 需要动态更新的时候也可以直接赋值
  document.getElementById('toggleBtn').addEventListener('click', () => {
    ele.random = !ele.random;
  })
}
</script>

兼容HTML attribute传值的优化方案 #

如果你一定要通过HTML attribute的方式传值，需要在Angular侧对Input值做类型转换，因为原生HTML attribute的值永远是字符串类型：

@Input()
set random(value: boolean | string) {
  // 处理字符串转布尔的情况
  this._random = typeof value === 'boolean' ? value : value === 'true';
}

转换后就可以用下面的写法传值：

<my-element random="true"></my-element>

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