Уведомлять дочерний компонент об изменениях в Angular2
Предположим, что у меня есть простой компонент Angular2
@Component({ selector: 'parent' })
@View({
template: `
<p>Parent {{ data }}</p>
<child [model]="data"></child>
`,
directives : [Child]
})
export class Parent {
data: number = 42;
}
поскольку вы можете видеть, что он использует другой простой компонент
@Component({
selector: 'child',
properties : ['model']
})
@View({
template: `
<p>Child {{ model }}</p>
`,
})
export class Child {
model: number;
}
Я передаю model
из компонента parent
в child
через синтаксис angular [property]
для привязки данных. Поэтому, если я хочу отслеживать некоторые изменения model
в parent
, я могу легко добавить событие в child
и через синтаксический трек (event)
изменений в "parent". Итак, как я могу реализовать противоположную ситуацию, когда изменения parent
model
и child
хотят получать уведомление?
Ответы
Ответ 1
Вы можете поместить свою дополнительную логику или вычисления в метод onChange, который вызывается после обновления свойств связанных сторон.
@Component({
selector: 'child',
properties : ['model']
})
@View({
template: `
<p>Child {{ model }}</p>
`,
})
class Child {
model: number;
onChange(map){
if(map.model) {
console.log('doing crazy stuff here');
console.log(map.model); //SimpleChange {previousValue: 43, currentValue: 44}
}
}
}
Plunker
Ответ 2
Вы можете использовать getters и сеттеры для управления им. Для вашего примера Child
компонент должен выглядеть следующим образом:
@Component({
selector: 'child',
properties : ['model']
})
@View({
template: `
<p>Child {{ model }}</p>
`,
})
class Child {
_model: number;
set model(newModelValue) {
// Here we are
console.log('new model value: ' + newModelValue)
this._model = newModelValue;
}
get model() {
return this._model;
}
}
Вот plunker для вашего случая