Angular 元素不能用大括号绑定值

Question

我想将 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>

Answer 1

在 Angular 中，元素属性需要使用带短划线的小写形式，而不是驼峰式大小写。在这种情况下，自定义元素应该是这样的：

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

Answer 2

在 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>

Angular 元素不能用大括号绑定值

Angular Elements cannot bind value with curly brackets

angular

custom-element

angular-elements