Angular 2 父子通信答案

【问题标题】：Angular 2 parent child comunicationAngular 2 父子通信
【发布时间】：2016-07-29 22:30:19
【问题描述】：

我有 2 个组件：RegistrationComponent 和 RegistryComponent。

注册组件：

@Component({
selector: 'registration_page',
template: 
'<div>
    <registry_form [model]="parentModel"></registry_form>
    <label>{{parentModel}}</label>
</div>,
styleUrls: [...],
directives: [...],
providers: []
})
export class RegistrationComponent 
{
   parentModel : string;

   constructor()
   {
      this.parentModel = "parent"
   }
}

注册表组件：

@Component({
selector: 'registry_form',
template: 
'
  <label for="name">name {{model}}</label>
  <input [(ngModel)]="model" required >
',
styleUrls: [...],
directives: [...]
})

export class RegistryFormComponent 
{
   @Input() model;
}

当我在 RegistryComponent 的输入中写入一些文本时，我可以看到更改，但在 RegistrationComponent 中看不到，女巫是父组件。我错过了什么？

【问题讨论】：

toddmotto.com/component-events-event-emitter-output-angular-2

标签： typescript angular components parent

【解决方案1】：

看看这段代码：

<registry_form [model]="parentModel"></registry_form>

[] 部分表示这将是一个“输入”绑定类型。您可以通过 2 种方式使事情发挥作用：

1) 将绑定改为

<registry_form [(model)]="parentModel"></registry_form>
                ^     ^

例如“盒子里的香蕉”。但这只是一个“语法糖”，因此您还需要实现 Output() modelChange 属性：

@Component({
  selector: 'registry_form',
  template: `
    <label for="name">name {{model}}</label>
    <input [(ngModel)]="model" (ngModelChange)="modelChange.next($event)" required >
  `,
})
export class RegistryFormComponent {
   @Input() model: any;
   @Output() modelChange = new EventEmitter();
}

2) 使parentModel 成为具有name 属性的对象，并传递整个对象：

import {Component, Input, Output, EventEmitter} from '@angular/core'

@Component({
  selector: 'registry_form',
  template: `
    <label for="name">name {{model.name}}</label>
    <input [(ngModel)]="model.name" required >
  `,
})
export class RegistryFormComponent {
   @Input() model: any;
}

@Component({
  selector: 'registration_page',
  template: `
  <div>
      <registry_form [model]="parentModel"></registry_form>
      <label>{{parentModel.name}}</label>
  </div>`,
  directives: [RegistryFormComponent],
})
export class RegistrationComponent {
   parentModel : any;

   constructor() {
      this.parentModel ={name:"parent"};
   }
}

【讨论】：

谢谢你！你救了我...我设法消除了所有注册表组件并将他的 HTML 放入注册页面...但这是我正在寻找的解决方案！
哪个选项最好？ @Dethariel

【解决方案2】：

因为它是一种单向绑定。 Child 有自己的范围。每当您在 child 中所做的更改都会保留在 child 中。

如果孩子需要更新更改并通知父母，需要使用事件。

【讨论】：