我该如何听角度2中的代码更改？

Question

我正在使用角度2。我有一个带有输入的组件。 我希望能够在输入值更改时编写一些代码。 绑定正在工作，并且如果更改了数据（从组件外部），我可以看到dom中有更改。

@Component({
    selector: 'test'
})
@View({
    template: `
    <div>data.somevalue={{data.somevalue}}</div>`
})
export class MyComponent {

    _data: Data;
    @Input()
    set data(value: Data) {
        this.data = value;
    }
    get data() {
        return this._data;
    }

    constructor() {
    }

    dataChagedListener(param) {
        // listen to changes of _data object and do something...
    }
}

Answer 1

您可以使用生命周期挂钩ngOnChanges ：

export class MyComponent {
  _data: Data;
  @Input()
  set data(value: Data) {
    this.data = value;
  }
  get data() {
    return this._data;
  }

  constructor() {
  }

  ngOnChanges([propName: string]: SimpleChange) {
    // listen to changes of _data object and do something...
  }
}

在以下情况下触发此挂钩：

如果任何绑定已更改

有关更多详细信息，请参见以下链接：

• https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html
• https://angular.io/docs/ts/latest/api/core/OnChanges-interface.html

Answer 2

如Thierry Templier的回答评论中所述， ngOnChanges生命周期挂钩只能检测到基元的更改。 我发现通过改用ngDoCheck ，您可以手动检查对象的状态，以确定对象的成员是否已更改：

完整的柱塞可在此处找到 。 但这是重要的部分：

import { Component, Input } from '@angular/core';

@Component({
    selector: 'listener',
    template: `
        <div style="background-color:#f2f2f2">
            <h3>Listener</h3>
            <p>{{primitive}}</p>
            <p>{{objectOne.foo}}</p>
            <p>{{objectTwo.foo.bar}}</p>

            <ul>
                <li *ngFor="let item of log">{{item}}</li>
            </ul>
        </div>
    `
})
export class ListenerComponent {
    @Input() protected primitive;
    @Input() protected objectOne;
    @Input() protected objectTwo;

    protected currentPrimitive;
    protected currentObjectOne;
    protected currentObjectTwo;

    protected log = ['Started'];

    ngOnInit() {
        this.getCurrentObjectState();
    }

    getCurrentObjectState() {
        this.currentPrimitive = this.primitive;
        this.currentObjectOne = _.clone(this.objectOne);
        this.currentObjectTwoJSON = JSON.stringify(this.objectTwo);
    }

    ngOnChanges() {
        this.log.push('OnChages Fired.')
    }

    ngDoCheck() {
        this.log.push('DoCheck Fired.');

        if (!_.isEqual(this.currentPrimitive, this.primitive)){
            this.log.push('A change in Primitive\'s state has occurred:');
            this.log.push('Primitive\'s new value:' + this.primitive);
        }

        if(!_.isEqual(this.currentObjectOne, this.objectOne)){
            this.log.push('A change in objectOne\'s state has occurred:');
            this.log.push('objectOne.foo\'s new value:' + this.objectOne.foo);
        }

        if(this.currentObjectTwoJSON != JSON.stringify(this.objectTwo)){
            this.log.push('A change in objectTwo\'s state has occurred:');
            this.log.push('objectTwo.foo.bar\'s new value:' + this.objectTwo.foo.bar);
        }

        if(!_.isEqual(this.currentPrimitive, this.primitive) || !_.isEqual(this.currentObjectOne, this.objectOne) || this.currentObjectTwoJSON != JSON.stringify(this.objectTwo)) {
             this.getCurrentObjectState();
        }
    }

应该注意的是，Angular文档提供了有关使用ngDoCheck ：

尽管ngDoCheck挂钩可以检测到英雄的姓名何时更改，但代价却是惊人的。 在每个更改检测周期之后，无论更改发生在何处，都会以极大的频率调用此钩子。 在此示例中，它被调用了二十次，用户才能执行任何操作。

这些初始检查大多数是由Angular在页面其他位置首次呈现无关数据引起的。 仅将鼠标悬停在另一个输入框中即可触发呼叫。 相对而言，很少有电话能揭示出相关数据的实际变化。 显然，我们的实现必须非常轻巧，否则用户体验将受到影响。