Question

我有2个组件：RegistrationComponent和RegistryComponent。

RegistrationComponent：

__dict__

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

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

Answer 1

看看这段代码：

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

[]部分意味着这将是＆＃34;输入＆＃34;绑定类型。你可以通过两种方式使事情发挥作用：

1）将绑定更改为

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

e.g。＆＃34;盒子里的香蕉＆＃34;。但这只是一个＆＃34;语法糖＆＃34;，所以你还需要实现一个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

因为它是单向绑定。孩子有自己的范围。无论你在孩子身上做出什么改变都会留在孩子身上。

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

Angular 2父母子女通讯

2 个答案: