Angular 6: как отслеживать изменения переменной в компоненте?
- Внутри компонента страницы есть массив;
- В нескольких разных местах внутри компонента к этому массиву добавляется новый элемент (в методе createMessage () и внутри подписчика getIncomingMessagesStream ());
- Каждый раз, когда в массив добавляется новый элемент, мне нужно выполнить сразу несколько действий (прокрутить страницу вниз и еще некоторых действий);
- Вместо того, чтобы выполнять дополнительные действия в нескольких местах, я хочу сделать это в одной точке внутри компонента, когда в мой массив добавляется новое значение.
Как это сделать?
В Angular 1.x был метод $ watch (), но его нет в Angular 2+.
I push a new message to messages array in several places:
- this.messageService.getIncomingMessagesStream().subscribe(...there...)
- createMessage() {...there...}
After I push a new message I need to do the same several actions:
- scroll window to bottom
- etc...
Now I have to copy-paste the same actions in every place where I push a new message in messages array.
But I don't want to copy-paste this actions,
I want to perform them after I push a new element to messages array,
perform then automatically, from one point in code, without copy-paste,
I don't want to duplicate this actions.
Насколько я знаю, ngOnChanges () обнаруживает только свойства, которые получают значения от внешнего компонента через декоратор @Input (). Но мне нужно определить внутренние свойства компонента; значения для этого свойства не поступают извне.
Как вы добавляете новые значения в массив?
myArray.push (новыйEl); но я помещаю новый элемент в два места в моем компоненте.
Могли бы вы написать такой метод, как private pushValue(value) { this.myArray.push(value); doSomethingElse(); }, и всегда использовать этот метод для добавления значения?
Также: используете ли вы значения массива в цикле *ngFor в шаблоне? Если да, можете ли вы показать эту разметку в вопросе?
Ответы 2
Думаю, я нашел решение. Это объект ES6 Прокси.
Прокси - это специальный объект, предназначенный для перехвата обращений к другому объекту и, при необходимости, их модификации и выполнения дополнительных действий.
let my_arr = [];
// Proxy(target, handler)
let arr_proxy = new Proxy(my_arr, {
get(target, prop) {
console.info(`\n Getting ${prop}`);
console.info(`Perform needed actions after getting ${prop}`);
return target[prop];
},
set(target, prop, value) {
console.info(`\n Setting ${prop} ${value}`);
console.info(`Perform needed actions after setting ${prop} ${value}`);
target[prop] = value;
return true;
}
});
arr_proxy.push('new message text');
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy
Также я нашел решение с использованием BehaviorSubject из RxJS.
// page.component.ts
private appData = new BehaviorSubject<any[]>([]);
constructor() {
this.appData.subscribe((data) => {
console.info('New data', data);
});
}
public addSomethingToAppData(something) {
this.appData.next([...this.appData.getValue(), something]);
}
http://reactivex.io/rxjs/manual/overview.html#behaviorsubject
Как вы думаете, что лучше использовать, ES6 Proxy или RxJS BehaviorSubject, для выполнения некоторых действий после того, как новый элемент был помещен в массив?
почему бы не добавить прослушиватель onChange к массиву в основном компоненте подписки: Здесь angular.io/api/core/OnChanges, это если объект привязан к данным.