角2母子通信

Question

我有两个组件: RegistrationComponent和RegistryComponent。

RegistrationComponent：

@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"
   }
}

RegistryComponent：

@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

看看这段代码：

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

[]部件意味着这将是一个“输入”绑定类型。你可以用两种方式让它发挥作用：

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"};
   }
}

Answer 2

因为这是单向绑定。孩子有自己的范围。无论何时，您在子项目中所做的更改都将保留在子项目中。

如果子程序需要更新更改并通知父级，则需要使用事件。