首页 文章

放置在Angular的ngOnChanges生命周期钩子中时，功能未运行

提问于
浏览 次
0

我正在检查以确保通过Angular的自定义Output（）和EventEmitter（）将某些值从另一个组件发送到另一个组件 . 它们是从我的第一个组件的视图发送的，如下所示：

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

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

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生命周期钩子中放置了相同的接收函数：

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

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

javascript angular lifecycle eventemitter

1 回答

  • 1

    从文档：

    Angular在检测到组件（或指令）的输入属性发生更改时调用其ngOnChanges（）方法 .

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

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

    在这个例子中，我有一个输入和输出 . 通过ngOnChanges跟踪输入更改 . 通过click事件跟踪事件：

    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

    回复于

相关问题