角度6:如何跟踪组件中变量的变化？

Question

1. 页面组件中有一个数组；
2. 在组件中的几个不同位置，一个新元素被添加到这个数组中(在createMessage()方法中和在getIncomingMessagesStream()的订阅服务器中)；
3. 每次向数组中添加一个新元素时，我都需要一次执行几个操作(向下滚动页面和一些操作)；
4. 我不想在多个地方执行额外的操作，而是希望在组件中的某个点执行此操作，当一个新值添加到我的数组中时。

该怎么做呢？

在角1.x中是$watch()方法，但它不在角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.

Answer 1

我想我找到了解决办法。它是ES6 代理对象。

Proxy是一个特殊的对象，其意思是拦截对另一个对象的调用，并在必要时修改它们并执行其他操作。

let my_arr = [];
// Proxy(target, handler)
let arr_proxy = new Proxy(my_arr, {
    get(target, prop) {
        console.log(`\n Getting ${prop}`);
    console.log(`Perform needed actions after getting ${prop}`);
        return target[prop];
    },

    set(target, prop, value) {
        console.log(`\n Setting ${prop} ${value}`);
    console.log(`Perform needed actions after setting ${prop} ${value}`);
        target[prop] = value;
        return true;
    }
});

arr_proxy.push('new message text');

​

​

Objects/Proxy

Answer 2

此外，我还找到了一个使用来自BehaviorSubject的RxJS的解决方案。

// page.component.ts

private appData = new BehaviorSubject<any[]>([]);

constructor() {
    this.appData.subscribe((data) => {
        console.log('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进行一些操作更好吗？