Вызовы API и методы жизненного цикла в Angular - PullRequest
Новая
       33

Вызовы API и методы жизненного цикла в Angular

1 голос
/ 08 марта 2020

Я пытаюсь обернуть голову вокруг angular и методов его жизненного цикла. Ниже приведен фрагмент кода моей проблемы. Я пытаюсь захватить вошедшего в систему пользователя, а затем вызвать API-интерфейс для моего бэкэнда, используя user.id. Я попытался переместить второй вызов API в ловушку жизненного цикла, которая находится дальше по цепочке, но я неоднократно получаю ошибки, указывающие, что this.user.id не определен. Когда я консольный журнал пользовательский объект в ngafterviewchecked, он приходит через. Буду признателен за любую помощь или общие советы по крюкам жизненного цикла. Это выполняется в файле app.component.ts. Мне очень повезло с методами жизненного цикла в React, но angular бросает меня за все oop. 

users:any;
userNouns:any;

ngOnInit(){
  this.http.get('http://localhost:8000/users/1')
    .subscribe((result)=>{this.user=result})
}

ngAfterViewChecked(){
  console.log(this.user);
  this.http.get(`http://localhost:8000/nouns/${this.user.id}`)
    .subscribe((result)=>{this.userNouns=result})
}

1 Ответ

0 голосов
/ 08 марта 2020

http-запрос в ngOnInit не блокируется. Компонент продолжит go через этапы его жизненного цикла, пока ваш первый http-ответ находится в режиме ожидания.

Вместо этого используйте оператор Rx JS, чтобы связать второй запрос с первым запросом. Вы можете использовать либо switchMap, либо concatMap, чтобы связать одну наблюдаемую с другой. Вы можете использовать tap для любых побочных эффектов (делать вещи). 

users:any;
userNouns:any;

ngOnInit(){
  this.http.get('http://localhost:8000/users/1').pipe(
    tap(result => this.user = result),
    concatMap(user => this.http.get(`http://localhost:8000/nouns/${this.user.id}`)),
    tap(result => this.userNouns = result)
  ).subscribe(() => {
    const contents = this.userNouns.map(noun => noun.content);
    console.log(contents);
  });
}
...