Angular 从另一个文件中的组件调用页面上的函数

我对离子型和角型都是新手，一直在努力寻找解决问题的方法。我有一个特定的函数，我想在某个页面文件上调用present。我需要从按钮组件文件调用这个函数（以便在单击时执行它）。我想知道如何做到这一点，因为我试图寻找一个解决方案，但找不到，我不能只是复制函数，因为这会重新加载一些需要在页面中更新的数据。先谢谢你

settings.page.ts上的函数（包含该函数的页面）：

其中我需要调用new-button.component.ts上的函数：

async showPopover( event ) {
    const popover = await this.popoverCtrl.create({
      component: NewComponent,
      event: event,
      mode: 'ios'
    });

    await popover.present();
  }

---

对于这个特定的需求，您首先需要了解组件通信是如何工作的

在angular中，组件是定义良好的封装单元，可以通过适当的组织方式与其他组件进行通信，而不仅仅是一个组件随机调用其他组件的方法

你有两个选择

1.）您可以在调用组件中引入EventEmitters，并在要在其上运行方法的组件中侦听该事件。前提是您的组件已链接（父->子关系）

2.）您可以将本例中的通用代码loadData（）方法移动到@Injectable服务，并使用依赖项注入在new button.component.ts文件中引入它

3.）您可以使用RxJS Subjects，单击按钮调用subject的下一个方法，这将在订阅该主题的任何组件中听到

请找到这几个关于这个主题的链接

---

谢谢。

我想您需要添加一项服务。服务允许不同的组件调用相同的方法。它们在英语中随处可见。感谢@Obaid的建议，我认为EventEmitters将是一个不错的选择，因为为了简单起见，我需要该功能停留在设置页面中（因此它会直接更新数据），关于如何开始的任何建议或您推荐的任何文章？查看您的文章@Obaid，高级感谢，因为它们非常好，但我似乎无法让它工作，因为我意识到new-button.component.ts和settings.page.ts是远亲（settings.page.ts是new-button.component.ts的父对象），我能做些什么？正如我所说的，我只是希望new-button.component.ts通知settings.page.ts发生了更改，这样它就可以更新数据了。

async showPopover( event ) {
    const popover = await this.popoverCtrl.create({
      component: NewComponent,
      event: event,
      mode: 'ios'
    });

    await popover.present();
  }