Angular Elements 不能用大括号绑定值答案

【问题标题】：Angular Elements cannot bind value with curly bracketsAngular Elements 不能用大括号绑定值
【发布时间】：2023-04-01 23:10:01
【问题描述】：

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

【问题讨论】：

看起来您的变量 fileOne 为空。您的代码在 StackBlitz 中运行良好，请参阅 here。

标签： angular custom-element angular-elements

【解决方案1】：

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

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

【讨论】：

【解决方案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>

【讨论】：