我有一个组件，上面有 2 个子组件，父组件从 URL 获取一个参数进行一些计算并在模板上显示一些数据。
但是我也使用 URL 参数通过子组件上的 @Input(( 传递给 2 个子组件。
我正在尝试为一个问题找到解决方案，如果用户在子组件中加载所有数据之前导航，我会看到这个问题。
因此，当用户导航到父组件时，我得到了它在 URL 上传递的 ID，调用 API 向用户显示一些数据。同时，我将该 ID 传递给调用另一个 API 并提取更多数据的子组件。
问题是在父组件显示上，他们可以单击链接并更改 URL 上的 ID，这将根据 URL ID 加载新数据并将其再次传递给子组件，这将导致它从 API 中提取新数据集。如果在从 API 调用返回所有数据之前单击以快速，则可以注意到子组件上的第一个 API 调用仍在发生，并且第二个调用已启动。
因此，您将看到显示的第一个 API 数据，并且在第二次调用完成后，数据将使用新数据集在子组件上更新。
防止这种情况发生的最佳方法是什么？我是否应该向子 API 调用添加延迟？
听起来您已经让父母使用更改 ID 更新了孩子。
如果让子项将其@Input视为Observable，则可以利用switchMap在 HTTP 请求完成之前传入 ID 更改时自动取消挂起的 HTTP 请求。
您可以通过以下方式实现此目的：
- 在子项中设置私有
Subject实例以保存 ID， - 使用
ngOnChanges使该Subject通过 ID 更改进行更新， - 通过管道
Subject(作为Observable(switchMap获取基于当前 ID 的 HTTP 请求Observable，以及
在该 Observable的订阅中对响应执行任何工作。
以下(未经测试的(代码应接近您的需求：
private id: Subject = new BehaviorSubject(null);
private data: Observable;
private sub: Subscription;
ngOnChanges(changes: SimpleChanges) {
if (changes['id']) {
this.id.next(changes['id']);
}
}
ngOnInit() {
this.data = this.id.asObservable().pipe(
filter(id => id !== null),
switchMap(id => GET_RESPONSE_OBSERVABLE_FOR(id)),
map(response => {
// build & return data structure suitable for template
})
);
this.sub = this.data.subscribe(data => {
// update child according to data
});
}
ngOnDestroy() {
this.sub.unsubscribe();
}
如果您可以使用async管道订阅模板中的可观察量，那么您甚至不需要ngOnDestroy一次手动取消订阅。
此方法消除了对任何硬编码延迟的需求。
所以在这种情况下，你可以做什么。 使子输入为Observable。 当父级完成数据加载时，将 {id} 发送到子项。
父组件
@Input() ID: string;
public id$: Observable<string>;
ngOnInit(){
this.httpService.get('urltofetchdatawith{ID}')
.subscribe(data =>{
if(data){
// After fetching the data in parent emit the {id} to child
this.id$ = new Observable<string>(ob => ob.next(this.ID));
}
})
}
父组件模板
<child-component [id]="id$"> </child-component>
子组件
@Input() id: Observable<string>;
ngOnChanges(){
if(id){
this.id
.pipe(
map(value => value),
switchMap(value => this.httpService('urltofetchdata{value}'))
)
.subscribe(data =>{
// Child data
})
}
}
您可以使用切换映射来实现它。 https://www.learnrxjs.io/operators/transformation/switchmap.html