Angular 6: непрерывно выполнять http-запрос внутри ngAfterContentChecked после получения данных от родительского компонента

Question

Я новичок в Angular и я из React.js

У меня есть проблема, когда Angular делает HTTP запросы навсегда внутри ngAfterContentChecked после получения данных от родительского компонента

Я не могу сделать запрос внутри ngAfterContentInit, потому что мне нужно подождать, пока родитель закончит делать запрос

Я просто хочу, чтобы он вызывал один раз сразу после получения данных от родителя

в React.js обычно я делаю запрос внутри componentWillReceiveProps

В то время как в Angular я делаю это.

Родительский компонент:

//codes...
groupId = '';
//codes...

ngOnInit() {
  const id = '23esaddq3sdasd';
  this.dataService.getUser(id).subscribe(data => {
    //codes...
    this.groupId = data.groupId;
    //codes...
  });
}

Дочерний компонент:

data = [];
@Input() groupId;
fetch;

ngAfterContentChecked() {
  if (this.groupId) {
    const res = this.dataService.getGroupMembers(this.groupId).subscribe(data => 
      this.data = data;
      this.fetch = 'done';
    });
    if (this.fetch === 'done') {
      res.unsubscribe();
    }
  }
}

Я пытаюсь unsubscribe, но все равно постоянно выполняю код.

Кто-нибудь, пожалуйста, помогите мне 10

Answer 1

Вместо ngOnChanges вы можете использовать setter и getter, которые запускаются только тогда, когда родительский элемент передает данные дочернему компоненту с помощью @input ().

ngOnChanges запускается всегда, когда что-либо изменяется в любом из родительских или дочерних элементовcomponent.

  private _name;
  get name() { return this._name };
  @Input() set name(val: string) {
      if (val) {
          this._name = val;
          this.getGreetings(this.name)
      }
  };
  greetings = '';
  processing = false;
  constructor(){}

  getGreetings(name){
      this.processing = true;
      setTimeout(()=>{
          this.greetings = 'Hi.. '+name+', How are you';
          this.processing = false;
      },2000)
  }

Рабочая демонстрационная ссылка: - Нажмите здесь

Answer 2

Для меня я бы сказал что-то вроде этого:

1. Родительский триггер http, вам нужно установить флаг типа isLoading = true
2. . В html используйте *ngIf="!isLoading "для этого дочернего компонента
3. После того, как родительский запрос завершил получение запроса, установите isLoading = false
4. Это сделает дочерний компонент визуализированным, и вы можете использовать ngOnInit ловушку внутри дочернего компонента для получения данных от родителя
5. После того, как дочерний компонент получит входные данные от родителя в ngOnInit, вы можете запустить свой http

Answer 3

Вы хотите использовать ngOnChanges, потому что он запускается каждый раз, когда изменяется значение @Input.

Полная подпись для ngOnChanges:

ngOnChanges(changes: SimpleChanges): void

. Проверьте измененияобъект, чтобы увидеть, содержит ли он изменение в @Input и соответствует ли это значение ожидаемому, и ТОГДА сделать HTTP-запрос следующим образом:

ngOnChanges(changes: SimpleChanges) {
  if (changes.groupId != null && fetch !== 'done') {
    const res = this.dataService.getGroupMembers(this.groupId).subscribe(data => 
      this.data = data;
      this.fetch = 'done';
    });
  }
}

Нет необходимости отписываться, потому что подчиненные запросы HTTP будут завершеныавтоматически.Чтобы доказать это, сделайте следующее:

    const res = this.dataService.getGroupMembers(this.groupId).subscribe(data => 
      this.data = data;
      this.fetch = 'done';
    },
    err => {
      console.log('I errored');
    },
    () => {
      console.log('I completed and won't fire again');
    });

PS Причина, по которой ngAfterContentChecked стреляет как сумасшедший, заключается в том, что он выполняется крайне регулярно.

Answer 4

Вместо ngAfterContentChecked вы можете использовать ngOnChanges (), который срабатывает, когда родительский элемент передает данные дочернему компоненту с помощью @input ().

Жизненный цикл ngAfterContentChecked будет использоваться, если у вас есть содержимое проекции 'ng-content' и вы получаете доступ к любому DOM при обнаружении изменения родительского компонента.