Как задержать вызов API углового дочернего компонента?

Question

У меня есть компонент, у которого есть 2 дочерних компонента, родительский компонент получает параметр из URL, выполняет некоторые вычисления и отображает некоторые данные в шаблоне.

Но я также использую параметр URL для передачик 2 дочерним компонентам, используя @Input () на дочерних компонентах.

Я пытаюсь найти решение для проблемы, которую я вижу, если пользователь перемещается до того, как все данные загружены в дочерние компоненты,

Поэтому, когда пользователи переходят к родительскому компоненту, я получаю идентификатор, переданный по URL, и вызываю API для отображения некоторых данных пользователю.В то же время я передаю этот идентификатор дочернему компоненту, который вызывает другой API, и извлекаю дополнительные данные.

Проблема заключается в том, что на дисплее родительского компонента пользователь может щелкнуть ссылку и изменить идентификатор URL-адреса.и это загрузит новые данные на основе URL-идентификатора и передаст их снова дочернему компоненту, и это заставит его извлекать новый набор данных из API.Если вы нажмете кнопку «Быстро» до того, как все данные вернутся из вызова API, вы можете заметить, что первый вызов API в дочернем компоненте все еще происходит, а второй вызов инициирован.

Итак, что произойдет, вы увидите первые данные API, отображенные на экране, и после завершения 2-го вызова данные будут обновлены в дочернем компоненте с новым набором данных.

Каков наилучший способ предотвратить это?Должен ли я добавить задержку к дочернему вызову API?

Answer 1

Похоже, у вас уже есть родитель, который обновляет ребенка с помощью смены идентификаторов.

Если вы заставите ребенка рассматривать его @Input как Observable, вы можете воспользоваться switchMap для автоматической отмены ожидающих HTTP-запросов, если входящий идентификатор изменяется до завершения HTTP-запроса.

Этого можно достичь путем:

1. настройки частного Subject экземпляра вдочерний элемент для удержания идентификатора,
2. с использованием ngOnChanges, чтобы сохранить этот Subject обновленным с изменениями идентификатора,
3. , который от Subject (как Observable) до switchMap дополучить HTTP-запрос Observable на основе текущего идентификатора и
4. , выполнив любую работу с ответом в подписке на этот 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.

Такой подход устраняет необходимость каких-либокодированная задержка.

Answer 2

вы можете использовать карту переключателей для достижения этого.https://www.learnrxjs.io/operators/transformation/switchmap.html