代码之家 › 专栏 › 技术社区 › Ennio

如何延迟子组件API调用?

rxjs angular

0

Ennio · 技术社区 · 6 年前

但我也使用URL参数通过子组件上的@Input()传递给2个子组件。

我试图找到一个问题的解决方案,我看到如果用户导航之前,所有的数据加载到子组件。

问题是,在父组件显示上,用户可以单击链接并更改URL上的ID,这将基于URL ID加载新数据,并再次将其传递给子组件,从而导致它从API中提取新数据集。如果在所有数据从API调用返回之前单击fast,您会注意到子组件上的第一个API调用仍在进行,第二个调用已启动。

防止这种情况发生的最佳方法是什么?我应该给子API调用添加延迟吗?

2 回复 | 直到 6 年前

1

Alex Peters 6 年前

听起来你已经让父母用改变的ID来更新孩子了。

如果你让孩子去治疗 @Input 作为一个 Observable ,则可以利用 switchMap

您可以通过以下方式实现:

Subject
使用 ngOnChanges 主题
管道 主题 (作为 可观察的 )通过 开关图 获取HTTP请求基于当前ID,以及
对订阅中的响应执行任何工作 .

以下(未测试的)代码应该接近您所需要的:

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

这种方法不需要任何硬编码延迟。

2

0

selvakumar 6 年前

您可以使用开关映射来实现它。 https://www.learnrxjs.io/operators/transformation/switchmap.html

3

0

Kooldandy 5 年前

所以在这种情况下你能做什么。使子输入为 Observable .

父组件

@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
        })
   }
}