如何以角度启用父组件的输入和按钮？

Question

我有以下父组件，

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

默认情况下两者都处于禁用状态..

我想要做的是需要使用 parent 启用这两个禁用的属性。

我正在使用的子 <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 中得到了 disabled 属性，但是为什么即使该属性存在，我也会得到 false 作为结果？

如果它给出的结果为true，则已知禁用为真，因此根据条件我可以启用按钮和输入，但不知道它在控制台中将禁用为假的原因..

请帮助我使用only parent component（即app.component.ts）在given example 中启用禁用的button 和input，以便我可以选择要上传的任何图像在里面..

我无法编辑子组件，因为它是一个库包，我的实际应用程序中没有任何代码，我唯一能做的就是我可以单独编辑父组件..

Answer 1

在你的 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;
  }
}

stackblitz

Answer 2

您好，您可以在子组件中使用 Input 属性。 这是工作示例https://stackblitz.com/edit/angular-file-upload-preview-ptgq2f 如果答案对您有用，请接受。