发射 child 组件数据自动更改为 parent 组件

Question

我有 BusinessComponent(parent) 和 AddressComponent(child)。现在在 AddressComponent 中，双向数据绑定工作正常。现在，我要求 AddressComponent 中的任何更改作为 Addressobject 发送到 BusinessComponent，而不是 Address [的单个属性 object。我尝试使用 ngOnChanges() 但 doc 是这样说的。

Angular only calls the hook when the value of the input property changes. The value of the hero property is the reference to the hero object. Angular doesn't care that the hero's own name property changed. The hero object reference didn't change so, from Angular's perspective, there is no change to report!

在不发送数据的情况下，parent 正在检测 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 objects 是可变的，意味着引用是相同的 object，但是，你正在做

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

in child，哪个初始化我也不明白，因为 Address（我假设它是一个 class）有几个属性。但如果你想拥有相同的参考，你不应该那样做。

我建议您为 Address 使用界面，例如：

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

然后你可以输入你的 object 比如：

address: Address = {}

在您的 parent 中，或者然后为其设置初始值，但您似乎想要在 child.

中使用干净的 object

所以从 child OnInit 中删除以下内容，你应该可以开始了:)

this.address = new Address('');

DEMO

发射 child 组件数据自动更改为 parent 组件

Emitting child component data changes to parent component automatically

angular2-template

angular2-components

angular