Question

我有一种情况，我不确定发生了什么，所以基本上我有两个部分：父母和孩子，我的结构看起来像这样：

在父组件中，我有一些显示在页面上的数据，并且在初始化页面时调用getPersonData（）方法获取该数据->这将从API返回人员数据。

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

父组件方法：

    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调用，并且在那里看到了更改，但是我的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('');
      });
  }

从子组件调用父方法无法使用回调

1 个答案: