Angular 2 - 将数据从子组件发送到父组件答案

【问题标题】：Angular 2 - send data from Child to Parent componentAngular 2 - 将数据从子组件发送到父组件
【发布时间】：2018-07-07 11:20:13
【问题描述】：

我有一个父组件有两个子组件的用例。选择子组件时，应重置父母FormControl。

为了做到这一点，我需要将一个布尔值从子级发送给父级，但这并没有按预期运行。

这是我当前的实现 - 不起作用！有人可以解释我忽略了什么吗？非常感谢

子组件

在孩子中注册事件发射器

 @Output() formControlReset: EventEmitter<boolean> = new EventEmitter();

发出事件

this.formControlReset.emit(true);

父组件

<div>
     <input (formControlReset)="formControlReset($event)" [(ngModel)]="userInput" [formControl]="inputFormControl" *ngIf="showSearchInput" placeholder="Search here" #searchInput></input>
</div>

在 formControl 上调用重置

formControlReset(value: boolean): void {
    console.log('doing something');
    this.inputFormControl.reset();
}

【问题讨论】：

你怎么称呼发射器？如果您尝试在构造函数中对其进行测试，它将无法正常工作。尝试添加一个按钮。 <button (click)="onClick()">Click </button>。那就叫它onClick(){this.formControlReset.emit(true);}

标签： angular output

【解决方案1】：

我认为您发布的内容没有任何问题。

@Input 和@Output 仅在您有父子组件关系时有效，对于不相关的组件无效。

我的猜测是子组件不是父组件结构的一部分。

【讨论】：

【解决方案2】：

您似乎没有使用子组件的选择器定义子组件。

改变这个：

<input (formControlReset)="formControlReset($event)" [(ngModel)]="userInput" [formControl]="inputFormControl" *ngIf="showSearchInput" placeholder="Search here" #searchInput></input>

到这里：

<app-childSelector (formControlReset)="formControlReset($event)" [(ngModel)]="userInput" [formControl]="inputFormControl" *ngIf="showSearchInput" placeholder="Search here" #searchInput></app-childSelector>

【讨论】：

【解决方案3】：

人们已经覆盖了发射器，如果您有实际的父子组件关系，它应该可以正常工作。如果这些是兄弟组件，则需要通过服务传递数据。

【讨论】：