javascript - 放置在 Angular ngOnChanges 生命周期 Hook 中时，函数未运行

Question

我正在检查以确保我通过 Angular 的自定义 Output() 和 EventEmitter() 从另一个组件获取某些值发送到另一个组件。它们是从我的第一个组件的 View 发送的，如下所示:

<list [results]="results" 
    (sendLanguage)="onLanguageReceived($event)"
    (sendZipcode)="onZipcodeReceived($event)">
</list>

如果我在接收值的组件内的 Angular ngOnInit 生命周期 Hook 的函数中控制台记录这些值，我会看到成功打印到控制台的值的当前状态。看起来像这样:

ngOnInit() {
        this.sortByFilters(this.language, this.zipcode);
        console.log(this.sortByFilters(this.language, this.zipcode));
}

完整的 sortByFilters 函数如下所示:

sortByFilters(language, zipcode) {
    this.onLanguageReceived(language);
    this.onZipcodeReceived(zipcode);
    console.log('sortByFilters: ' + 'lang ' + language, 'zip ' + zipcode);
}

但是因为我还需要在用户单击元素时查看这些值的状态，所以我将相同的接收函数放置在 ngOnChanges 生命周期 Hook 中:

ngOnChanges() {
        this.sortByFilters(this.language, this.zipcode);
        console.log(this.sortByFilters(this.language, this.zipcode));
}

但是，这并没有按预期工作。当用户单击相关 UI 时，ngOnChanges 中的函数永远不会触发，因此控制台日志在初始 OnInit 运行后永远不会发生。这不正是 ngOnChanges 设计用于的场景吗？我错过了什么吗？

Answer 1

来自文档:

Angular calls its ngOnChanges() method whenever it detects changes to input properties of the component (or directive).

https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html#!#onchanges

ngOnChanges 仅发生在输入属性上，而不发生在输出属性上。

在这个例子中，我有一个输入和输出。输入更改通过 ngOnChanges 进行跟踪。该事件通过其点击事件进行跟踪:

export class StarComponent implements OnChanges {
    @Input() rating: number;
    starWidth: number;
    @Output() ratingClicked: EventEmitter<string> =
        new EventEmitter<string>();

    ngOnChanges(): void {
        // Convert x out of 5 starts
        // to y out of 86px width
        this.starWidth = this.rating * 86 / 5;
    }

    onClick(): void {
        this.ratingClicked.emit(`The rating ${this.rating} was clicked!`);
    }
}

我这里有完整的示例:https://github.com/DeborahK/Angular2-GettingStarted