如何解决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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。