将数据 onChange 从孩子传递给父母？ 角

Question

我需要将数据从孩子传递给父母，但需要更改。

子组件代码：

  <input type="file" name="file" accept="image/*"
        (change)="handleInputChange($event)">

父组件：

 <app-file-uploader></app-file-uploader>  //this is child component

我需要将 ($event) 传递给父组件。

Answer 1

您需要使用 Angular 的Output()指令。 这是它的完成方式：

首先：在您的子组件中，添加以下导入语句：

import { Output } from '@angular/core';

第二：在子组件类中：添加以下属性：

@Output() onChange = new EventEmitter<any>();

现在在您的handleInputChange($event) ，您需要发出 onChange 属性：

handleInputChange($event){
    // ... all of your logic
    this.onChange.emit($event); // this will pass the $event object to the parent component.
}

最后：在你的父组件模板中，你可以这样调用你的组件：

<app-file-uploader (onChange)="callSomeFunction($event)"></app-file-uploader>

注意：将callSomeFunction替换为您正在调用的任何函数。

这是关于如何使用 Output() 的Angular 文档。 希望这个回答对你有帮助！