如何以角度将数据从父组件传递回子组件

如何解决如何以角度将数据从父组件传递回子组件

我在子组件中使用Google Place Autocomplete，但是当每个输入都填充数据时，父组件不会获得更改，因此无法发布到服务器有效数据。

我有一个在父组件中调用的子组件：

<rc-billing-data *ngIf="accountData"
      [clientRegion]="accountData.region"
      [(currencyModel)]="accountData.currency"
      [currenciesModel]="accountData.currencies"
      [(billingLanguageModel)]="accountData.billingLanguage"
      [localeModel]="accountData.locales"
      [(autoPaymentModel)]="accountData.enableAutoPayment"
      [(countryModel)]="accountData.country"
      [billingCountriesModel]="accountData.billingCountries"
      [(zipModel)]="accountData.zip"
      [(cityModel)]="accountData.city"
      [(addressNameModel)]="accountData.addressName"
      [(addressTypeModel)]="accountData.addressType"
      [(addressNumberModel)]="accountData.addressNumber"
      [(addressFloorDoorModel)]="accountData.addressFloorDoor">
    </rc-billing-data>

在子组件中，Google Place输入调用handleAddressChange函数：

<label for="googleAddress">Pontos cím keresése</label>
        <input ngx-google-places-autocomplete
               (onAddressChange)="handleAddressChange($event)"
               id="googleAddress"
               type="text">

handleAddressChange函数正在更改输入的值，但accountData不会更新。

handleAddressChange(event) {
    let address: Address;
    this.zipModel = '';
    this.cityModel = '';
    this.addressNameModel = '';
    this.addressTypeModel = '';
    this.addressNumberModel = '';
    this.addressFloorDoorModel = '';

    this.addressCoordsModel = {
      lat: event.geometry.location.lat(),lng: event.geometry.location.lng()
    };

    address = this.regionHelper.setAddressParts(this.clientRegion,event.address_components);

    this.countryModel = address.country;
    this.zipModel = address.zip;
    this.cityModel = address.city;
    this.addressNameModel = address.addressName;
    this.addressTypeModel = address.addressType;
    this.addressNumberModel = address.addressNumber;
  }

如果我在输入中输入手动，则说明它们正常工作。

解决方法

在子组件中最好有一个输出事件发出器（最好在所有AccountData中有一个输入），并且父对象需要管理此事件。例如：

父母需要这个

HTML

<child-component [accountData]="accountDataObject" (changesOnChild)="parentDetectChanges(event)" > </child-component>

ts

parentDetectChanges(newData: any){
    //put the new values here


}

孩子

@Input() accountData: AccountData;
@Output() changesOnChild = new EventEmitter<AccountData>();

....
some code
....

handleAddressChange(event) {
    //modify account data object

    ...

    this.changesOnChild.emit(this.accountData)
}