Вызов родительского метода из дочернего компонента не работает с обратным вызовом - PullRequest
Новая
       17

Вызов родительского метода из дочернего компонента не работает с обратным вызовом

0 голосов
/ 24 мая 2019

У меня одна ситуация, и я не уверен, что происходит, поэтому в основном у меня есть два компонента: родительский и дочерний, и моя структура выглядит следующим образом:

в родительском компоненте у меня есть некоторые данные, которые отображаютсяна странице, и я получаю эти данные, когда страница инициализируется, вызывая метод getPersonData () -> это возвращает данные о человеке из API.

Также в родительском компоненте html у меня есть дочерний компонент, где мне также нужна функциональность для обновления данных вродительский компонент (и чтобы увидеть потенциальные изменения, отраженные в HTML), то, что я здесь сделал, я передал как функцию @Input param из родительского компонента и вызвал ее из дочернего компонента, когда я хотел обновить страницу.

метод родительского компонента: 

    getPersonData() {
        this.personService.getPersonData(id).then((data) => {
          this.personData = data;
          console.log(this.personData)
        });
    }

компонент parrent html: 

<div>
  {{person.firstName}} {{person.lastName}}
  <child-component [getPersonData]="getPersonData" ></child-component>
</div>

А в дочернем компоненте у меня есть что-то вроде этого: 

@Input() getPersonData: () => void;

  savePerson() {
    this.personService.savePersonData(personId, this.personPayload).subscribe(
      () => {
        this.getPersonData();
      });
  }

И теперь происходит странная вещь: во вкладке «Журнал консоли» и «Сеть» я вижу, что API CALL выполнен, и я вижу изменения там, но мой HTML остается со старыми данными, это то, что я не понимаю, данные журнала консоли не похожиHTML-данные, консольный журнал и все в родительском компоненте.Может ли кто-нибудь помочь мне понять, что здесь происходит, что мне не хватает?Основная причина, по которой html не обновляется, похоже, что personData, вызываемый из родительского компонента, отличается от parentData, который вызывается с помощью функции обратного вызова из дочернего компонента ...

1 Ответ

1 голос
/ 24 мая 2019

используйте @output для того, чтобы знать, что родитель вызывает вызов функции get после сохранения, сделанного из дочернего компонента, это все равно, что информировать родителя о необходимости вызова при необходимости 

<child-component [getPersonData]="getPersonData" (getevent)="getPersonData()"></child-component>

child.component

@output getevent = new EventEmitter();

 savePerson() {
    this.personService.savePersonData(personId, this.personPayload).subscribe(
      () => {
      this.getevent.emit('');
      });
  }
...