Angular Elements无法将值与大括号绑定

问题描述

我想将Angular组件导出为自定义Web组件。我的组件已输入：

@input() inputFileID: string;

用于绑定到HTML中的属性：

<input type="file" name="{{inputFileID}}" id="{{inputFileID}}" 
      (change)="onFileDrop($event)" class="filedrop__uploadtext" />
<label for="{{inputFileID}}" class="filedrop__uploadlabel"> Upload file </label>

很遗憾，inputFileID似乎是空的。我像这样将这个自定义元素放在index.html中：

<custom-file-drop-element inputFileID="fileOne"></custom-file-drop-element>

在检查模式下，我看到它已渲染：

<input type="file" class="filedrop__uploadtext" name="" id="">
<label class="filedrop__uploadlabel" for=""> Upload file </label></div>

解决方法

在Angular Elements中，属性必须是小写的破折号，而不是驼峰式的大小写。在这种情况下，自定义元素应如下所示：

<custom-file-drop-element input-file-id="fileOne"></custom-file-drop-element>

,

在Ts中尝试这样

   @Input() inputFileID: string;
   fileId:any;

 ngOnInit() {
  if (this.inputFileID && this.inputFileID!=null) {
     this.fileId = this.inputFileID;
   }
}

在HTML文件中

<label for="{{fileId}}" class="filedrop__uploadlabel"> Upload file </label>