Angular从index.html向Web Component传Input绑定常量不生效如何解决

• Angular的方括号[]绑定语法仅在Angular框架管理的组件模板内生效，index.html属于原生静态HTML页面，Angular模板编译器不会解析该文件内的绑定语法，因此[someValue]="'ccccc'"这类写法不会生效，相当于属性未传递。
• 原生HTML的属性大小写不敏感，你书写的驼峰格式nVisible会被浏览器自动转换为全小写的nvisible，无法和你@Input('nVisible')指定的输入别名匹配，导致值无法正确接收。

方案1：静态常量传值（推荐） #

直接按照原生HTML规范书写属性，修改对应Input的匹配规则即可：

1. 修改index.html代码，去掉方括号绑定，属性使用烤串式命名（全小写加短横线分隔）：

<body>
  <cast-catalog n-visible="4" some-value="ccccc"></cast-catalog>
</body>

2. 修改组件Input定义，非字符串类型可以通过setter做自动类型转换：

export class CastCatalogComponent implements OnInit {
  // 数字类型输入加setter自动转换HTML传入的字符串格式值
  @Input('n-visible')
  set numVisible(val: string | number) {
    this._numVisible = typeof val === 'string' ? parseInt(val, 10) : val;
  }
  get numVisible(): number {
    return this._numVisible;
  }
  private _numVisible: number = 6;

  // 字符串类型直接匹配烤串别名即可
  @Input('some-value') someValue: string;

  // 其他代码
}

注：如果你是通过createCustomElement将Angular组件打包为标准Web Component，Angular会自动将驼峰命名的Input映射为烤串格式的HTML属性，不需要额外指定别名，直接在HTML里写烤串格式属性即可。

方案2：动态值传值 #

如果需要传递动态值/非字符串类型值，可以直接通过JS操作DOM对象的属性赋值，不需要依赖HTML属性：

<body>
  <cast-catalog></cast-catalog>
  <script>
    const castCatalog = document.querySelector('cast-catalog');
    // 直接给DOM属性赋值，支持任意类型，大小写和组件Input名保持一致即可
    castCatalog.numVisible = 4;
    castCatalog.someValue = 'ccccc';
  </script>
</body>

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