[英]Angular5 - Change parent's property from child component's input's [(ngModel)] binding
[英]Angular 2 ngModel in child component updates parent component property
我制作了一个简单的 UI,它包含两个组件(父和子)。
UI 的作用是当我在 Child 组件的输入框中输入一些东西时。 该值将使用 ngModel 更改。
子组件以这种方式工作正常。
// Child Component
@Component({
selector: 'child',
template: `
<p>{{sharedVar}}</p>
<input [(ngModel)]="sharedVar">
`
})
export class ChildComponent {
sharedVar: string;
}
现在我有一个父组件,我打算使用与子组件相同的值。
我将子组件添加到父模板中,并使用依赖注入来调用子组件的sharedVar
。
// Parent Component
@Component({
selector: 'parent',
template: `
<h1>{{sharedVar}}</h1>
<child></child>
`,
directives: [ChildComponent],
providers: [ChildCompnent]
})
export class ParentComponent {
sharedVar: string;
constructor(child: ChildComponent) {
this.sharedVar = child.sharedVar;
}
}
问题是当我在输入框中输入时, <p>
的值会自动更改,而父组件的<h1>
的值不会更改。
我们可以使用父模板中的[(x)]
语法来实现与子模板的双向数据绑定。 如果我们创建一个名为xChange
的 Output 属性,Angular 将自动更新父属性。 然而,每当孩子改变值时,我们确实需要emit()
一个事件:
import {Component, EventEmitter, Input, Output} from 'angular2/core'
@Component({
selector: 'child',
template: `
<p>Child sharedVar: {{sharedVar}}</p>
<input [ngModel]="sharedVar" (ngModelChange)="change($event)">
`
})
export class ChildComponent {
@Input() sharedVar: string;
@Output() sharedVarChange = new EventEmitter();
change(newValue) {
console.log('newvalue', newValue)
this.sharedVar = newValue;
this.sharedVarChange.emit(newValue);
}
}
@Component({
selector: 'parent',
template: `
<div>Parent sharedVarParent: {{sharedVarParent}}</div>
<child [(sharedVar)]="sharedVarParent"></child>
`,
directives: [ChildComponent]
})
export class ParentComponent {
sharedVarParent ='hello';
constructor() { console.clear(); }
}
我在 ParentComponent 中使用了sharedVarParent
只是为了证明名称在父级和子级中不必相同。
您可以设置从子级到父级的事件发射器通信( outputs
)。 例如像这样:
@Component({
selector: 'child',
template: `
<p>Child: {{sharedVar}}</p>
<input [(ngModel)]="sharedVar" (ngModelChange)="change()">
`
})
export class ChildComponent {
@Output() onChange = new EventEmitter();
sharedVar: string;
change() {
this.onChange.emit({value: this.sharedVar});
}
}
和父组件:
@Component({
selector: 'parent',
template: `
<h1>{{sharedVar}}</h1>
<child (onChange)="sharedVar = $event.value"></child>
`,
directives: [ChildComponent]
})
export class ParentComponent {
sharedVar: string;
constructor() {
}
}
如果你想在同一个组件中有多个双向数据绑定,你可以这样做
export class ComponentName {
@Input() public first: string = '';
@Input() public second: string = '';
@Output() public firstChange = new EventEmitter();
@Output() public secondChange = new EventEmitter();
public functionName1(first: string): void {
this.first = first;
this.firstChange.emit(first);
}
public functionName2(second: string): void {
this.second = second;
this.secondChange.emit(second);
}
}
当输入和输出被命名为 'x' 和 'xChange' 时,它会在属于一起的父级中自动检测它们。
我认为这实际上比接受的答案中的做法更好,因为在这里它立即清楚地说明了名称之间的关系。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.