从不使用回调的子组件调用父方法

Question

我有一种情况，但我不确定发生了什么，所以基本上我有两个组件：父组件和子组件，我的结构如下所示：

在父组件中，我有一些数据显示在页面上，我在页面初始化时调用方法 getPersonData() 获取该数据 -> 这个 returns 来自 API 的人员数据。

也在父组件中 html 我有子组件，我还需要在父组件中刷新数据的功能（并查看反映在 HTML 上的潜在更改），我在这里所做的是，当我想刷新页面时，我从父组件作为@Input 参数函数传递并从子组件调用它。

父组件方法：

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

父组件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 不同...

Answer 1

使用@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('');
      });
  }

从不使用回调的子组件调用父方法

Calling parent method from child component not working with callback

angular

callback

angular-decorator