如何在 angular 中将数据从父组件传回子组件

Question

我在我的子组件中使用 Google Place Autocomplete，但是当每个输入都填充数据时，父组件没有得到更改，所以我不能 post服务器有效数据。

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

<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 放置输入调用 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;
  }

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

Answer 1

最好在你的 child 组件中有一个输出事件发射器（最好有一个包含所有 AccountData 的输入）并且你的 parent object 需要管理这个事件。例如：

Parent需要这个

HTML

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

ts

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


}

child

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

....
some code
....

handleAddressChange(event) {
    //modify account data object

    ...

    this.changesOnChild.emit(this.accountData)
}

如何在 angular 中将数据从父组件传回子组件

How to pass back data from parent component to child component in angular

typescript

angular

angular10