如何延迟子组件API调用?

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

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

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

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

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

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

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

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

所以在这种情况下你能做什么。使子输入为 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
        })
   }
}