Angular2亲子交流

Question

我有 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 中看不到是父组件。我错过了什么？

Answer 1

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

中

如果child需要更新变更并通知parent，需要使用事件。

Answer 2

看这段代码：

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

[] 部分意味着这将是一个 "input" 绑定类型。您可以通过两种方式使它工作：

1) 将绑定更改为

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

例如"banana in the box"。但这只是一个 "syntactical sugar"，所以你还需要实现一个 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"};
   }
}

Angular2亲子交流

Angular 2 parent child comunication

components

parent

typescript

angular