如何在角度上启用父组件的输入和按钮？
我有下面的父组件，
app.component.html:
<h1> Look at console </h1>
<app-profile-image></app-profile-image>app.component.ts:
ngOnInit() {
console.log((document.getElementById('fileInput') as any));
console.log((document.getElementById('fileInput') as any).disabled);
console.log((document.getElementsByClassName('hover-text') as any));
console.log((document.getElementsByClassName('hover-text') as any)[0].disabled)
}您可以在示例 https://stackblitz.com/edit/angular-file-upload-preview-zaipvg中看到父组件和子组件实现。
在子组件中，您可以看到以下内容，
<button class="hover-text" [disabled]="true">Choose file</button>和
<input id="fileInput" type='file' (change)="onSelectFile($event)" [disabled]="true">默认情况下，两者都处于禁用状态。
我要做的是，需要使用父启用这两个禁用的属性。
我使用的子<app-profile-image></app-profile-image>是实际应用程序中的库，这意味着我不能直接更改子程序的代码，所以通过父级，我需要更改disabled属性以启用。
我试过了，
console.log((document.getElementById('fileInput') as any));和
console.log((document.getElementsByClassName('hover-text') as any));这两种方法都提供了禁用属性(在给定的示例中可以看到控制台)
但,
console.log((document.getElementById('fileInput') as any).disabled);和
console.log((document.getElementsByClassName('hover-text') as any)[0].disabled)将结果作为false给出，但我在上面给定的console.log中得到禁用的属性，但是即使属性存在，为什么要将假作为结果呢？
如果它以true的形式给出结果，那么就知道禁用是真的，因此根据条件，我可以启用按钮和输入，但不知道它在控制台中将禁用为false的原因。
请帮助我启用禁用的button和input在给定实例中使用唯一父组件(即app.component.ts )，以便我可以选择任何图像上传在其中。
我无法编辑子组件，因为它是一个库包，在我的实际应用程序中没有任何代码，我唯一能做的就是可以单独编辑父组件。
Stack Overflow用户
发布于 2019-01-09 15:14:44
在app.component.html中：
<app-profile-image (mouseenter)=onProfileImageHovered()></app-profile-image>在app.component.ts中：
onProfileImageHovered(){
document.getElementById('fileInput')['disabled'] = false;
const hoverTextCollection = document.getElementsByClassName('hover-text');
if (!hoverTextCollection) {
return null;
}
const btn = Array.from(hoverTextCollection).find((e) => {
return (e instanceof HTMLButtonElement &&
e.innerHTML === 'Choose file');
});
if(btn) {
btn['disabled'] = false;
}
}https://stackoverflow.com/questions/54112225
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号