Angular 2亲子沟通

问题描述：

我有2个组件：RegistrationComponent和RegistryComponent。Angular 2亲子沟通

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巫父组件。我错过了什么？

https://toddmotto.com/component-events-event-emitter-output-angular-2 – Matt

答

看这个代码：

<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 –

答

因为它是单向绑定。孩子有自己的范围。每当你在孩子身上做的改变都会留在孩子身上。

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

Angular 2亲子沟通

相关推荐