ngOnChanges调用了多次
ngOnChanges调用了多次
提问于 2019-08-08 20:47:31
我已经使用ngFor生成了多个离子幻灯片，并在其中插入了一个组件。它会多次调用ngOnChanges。我希望它只调用一次，这样我就可以调用我的api了。
我已经尝试使用多个angular生命周期钩子。
这就是我创建幻灯片的方式，菜单有19个元素
<ion-slides #slides [options]="slideOpts" (ionSlideDidChange)="slideChanged($event)">
<ion-slide *ngFor="let i of menu; let j = index">
<h1>{{ i.name }}</h1>
<app-homenews [categoryId]="currentCategoryId" ></app-homenews>
</ion-slide>
</ion-slides>这就是我们进行变更检测的方式
@Input() categoryId: number;
ngOnChanges(changes: SimpleChanges) {
let chg = changes['categoryId'];
console.log(chg.currentValue);
} 我希望它只被调用一次，现在它已经调用了19次。
我可以在这里使用rxjs吗？
回答 3
Stack Overflow用户
回答已采纳
发布于 2019-08-08 20:58:35
当来自模板的输入变量的值发生变化时，ngOnChanges就会运行binding.So多次触发它是一个普通的behavior.If你只想执行一次你可以像这样使用的代码
@Input() isFirstRun;
ngOnChanges(changes: SimpleChanges) {
if(this.isFirstRun){
let chg = changes['categoryId'];
console.log(chg.currentValue);
}
}
<ion-slide *ngFor="let i of menu; let j = index">
<h1>{{ i.name }}</h1>
<app-homenews [isFirstRun]="j===0?true:false" [categoryId]="currentCategoryId" ></app-homenews>
</ion-slide>Stack Overflow用户
发布于 2019-08-08 21:11:21
您可以在服务中添加isFirstRun标志，并在组件中使用该标志。您可以继续使用ngOnchanges，因为它在值发生更改时非常有用
ngOnChanges(changes: SimpleChanges) {
if (this.flagService.isFirstRun || value has changed) {
// call API
}
} Stack Overflow用户
发布于 2019-08-08 21:23:16
为了避免使用ngOnChanges周期，我使用了这种方法一次。
在您的组件中：
private _changes;
private id;
@Input()
set changes(changes) {
this._changes= changes;
this.id = changes[id];
}
}
get changes(): string {
return this._changes;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57412971
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号