Typescript 角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;
}

@组件({
选择器：“注册页面”，
模板：
'
{{parentModel}}
,
样式URL:[…]，
指令：[……]，
提供者：[]
})
导出类注册组件
{
父模型：字符串；
构造函数（）
{
this.parentModel=“parent”
}
}

注册表组件：

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

@组件({
选择器：“注册表表单”，
模板：
'
名称{{model}}
',
样式URL:[…]，
指令：[……]
})
导出类RegistryFormComponent
{
@输入（）模型；
}

---

当我在RegistryComponent的输入中写入一些文本时，我可以看到更改，但在作为父组件的RegistrationComponent中看不到。我缺少什么？

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

---

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

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

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

查看以下代码：

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

e、 g.“盒子里的香蕉”。但这只是一个“语法糖”，因此您还需要实现一个

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();
}

请看以下代码：

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

e、 g.“盒子里的香蕉”。但这只是一个“语法糖”，因此您还需要实现一个

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();
}

---

谢谢你，伙计！你救了我…我设法消除了所有注册表组件，并将他的HTML放入注册页面…但这是我一直在寻找的解决方案！哪个选项是最好的@谢谢你，伙计！你救了我…我设法消除了所有注册表组件，并将他的HTML放入注册页面…但这是我一直在寻找的解决方案！哪个选项是最好的@德塔里尔