将子组件数据更改自动发送到父组件

Question

我有BusinessComponent(父)和AddressComponent(孩子)。现在在AddressComponent中，双向数据绑定工作正常。现在，我要求将AddressComponent的任何更改作为Address对象(而不是Address对象的单个属性)发送到BusinessComponent。我尝试使用ngOnChanges()但文档说了这个。

Angular 仅在输入属性的值更改时调用钩子。hero 属性的值是对 hero 对象的引用。Angular 不在乎英雄自己的名字属性是否发生了变化。英雄对象引用没有改变，所以从 Angular 的角度来看，没有要报告的变化！

并且在不发出数据的情况下，父级正在检测AddressComponent的变化。我找不到实现这一目标的方法。

这是我的代码示例。

地址组件

import { Component,  EventEmitter, Input, OnInit, Output, OnChanges, SimpleChanges } from '@angular/core';
import { AppService } from '../services';
import { Address } from '../types';
@Component({
selector: 'app-address',
templateUrl: 'address.component.html'
})
export class AddressComponent implements OnInit, OnChanges {
@Input()
address: Address;
@Output()
addressChange: EventEmitter<Address> = new EventEmitter<Address>();
constructor(
private appService: AppService
) { super(appService); }
ngOnInit() {
this.address = new Address('');
}
ngOnChanges(changes: SimpleChanges) {
// This is not being called for emitting the changes.
console.log(changes);
this.addressChange.emit(this.address);
}
}

地址组件模板

<div class="form-row">
<label class="form-label" for="houseNo">{{ labels['houseNo'] }}</label>
{{ address.houseNo }}
<input [(ngModel)] = "address.houseNo" type="text" name="houseNo" id="houseNo" ref-houseNo>
</div>
<div class="form-row">
<label class="form-label"  for="street">{{ labels['street'] }}</label>
<input [(ngModel)] = "address.street" type="text" name="street" id="street" ref-street>
</div>
<div class="form-row">
<label class="form-label"  for="village">{{ labels['village'] }}</label>
<input [(ngModel)] = "address.village" type="text" name="village" id="village" ref-village>
</div>
<div class="form-row">
<label class="form-label"  for="city">{{ labels['city'] }}</label>
<input [(ngModel)] = "address.city" type="text" name="city" id="city" ref-city>
</div>

我在BusinessComponet中像这样绑定输入

<app-address [(address)]="address"></app-address>.

如何实现这一点？

Answer 1

如注释中所述，您不需要双向绑定或@Output。由于JS对象是可变的，这意味着引用是相同的对象，但是，您正在做

ngOnInit() {
this.address = new Address('');
}

在 child 中，我也不理解初始化，因为Address(我假设它是一个类)有几个属性。但是如果你想有相同的引用，你不应该这样做。

我建议你为你的Address使用接口，比如：

export interface Address {
houseNo: number;
street: string;
village: string;
city: string;
}

然后，您还可以键入对象，例如：

address: Address = {}

在你的父母中，或者为它设置初始值，但似乎你想要一个干净的对象在你的孩子。

因此，请从子OnInit中删除以下内容，您应该很高兴:)

this.address = new Address('');

演示