私にはBusinessComponent（親）とAddressComponent（子供）がいます。現在、内ではAddressComponent、双方向のデータバインディングが正常に機能しています。今、私はの変更必要AddressComponentに放出されるBusinessComponentようAddressオブジェクトではなく、個々のプロパティAddressのオブジェクトを。私は使ってみましたngOnChanges()が、ドキュメントにはこれが書かれています。
Angularは、inputプロパティの値が変更された場合にのみフックを呼び出します。ヒーロープロパティの値は、ヒーローオブジェクトへの参照です。Angularは、ヒーロー自身の名前プロパティが変更されたことを気にしません。ヒーローオブジェクトの参照は変更されていないため、Angularの観点からは、レポートする変更はありません。
そして、データを発行せずに、親はの変化を検出していますAddressComponent。私はこれを達成する方法を見つけることができませんでした。
これが私のコードサンプルです。
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);
}
}
AddressComponentテンプレート
<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>。
これを達成する方法は？
コメントで述べたように、双方向バインディングまたはは必要ありません@Output。JSオブジェクトは変更可能であるため、参照は同じオブジェクトであることを意味しますが、
ngOnInit() {
this.address = new Address('');
}
子では、Address（クラスだと思いますが）いくつかのプロパティがあるため、初期化についても理解できません。しかし、同じ参照が必要な場合は、そうすべきではありません。
Address次のようなインターフェースを使用することをお勧めします。
export interface Address {
houseNo: number;
street: string;
village: string;
city: string;
}
また、次のようにオブジェクトを入力できます。
address: Address = {}
親で、またはそれに初期値を設定しますが、子にクリーンなオブジェクトが必要なようです。
だから、子供から以下を削除し、OnInitあなたは行ってもいいはずです:)
this.address = new Address('');
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加