Angular 2 ngModel в дочернем компоненте обновляет свойство родительского компонента
Я сделал простой пользовательский интерфейс, который состоит из двух компонентов (родитель и ребенок).
что делает пользовательский интерфейс, это когда я набираю некоторые вещи в поле ввода дочернего компонента. Значение изменится с помощью 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>
изменения автоматически, пока значение не меняются.
2 ответов
мы можем использовать [(x)]
синтаксис в Родительском шаблоне для достижения двусторонней привязки данных с дочерним элементом. Если мы создадим выходное свойство с именем xChange
, 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(); }
}
Я sharedVarParent
в ParentComponent просто чтобы показать, что имена не должны быть одинаковыми в родитель и ребенок.
вы можете настроить связь эмиттера событий (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});
}
}
и родительский компонент in:
@Component({
selector: 'parent',
template: `
<h1>{{sharedVar}}</h1>
<child (onChange)="sharedVar = $event.value"></child>
`,
directives: [ChildComponent]
})
export class ParentComponent {
sharedVar: string;
constructor() {
}
}