我該如何聽角度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在頁面其他位置首次呈現無關數據引起的。 僅將鼠標懸停在另一個輸入框中即可觸發呼叫。 相對而言，很少有電話能揭示出相關數據的實際變化。 顯然，我們的實現必須非常輕巧，否則用戶體驗將受到影響。