Question

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

Angular仅在输入属性的值更改时调用挂钩。 hero属性的值是对hero对象的引用。 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>。

如何实现这一目标？

Answer 1

如评论中所述，您不需要双向绑定或@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('');

<强> DEMO

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

1 个答案: