angular - Angular Elements 不能用大括号绑定值

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>

标签： angularcustom-elementangular-elements

Answer 1

在 Angular Elements 中，属性需要是带有破折号的小写，而不是驼峰式。在这种情况下，自定义元素应该是这样的：

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