时间戳

首页 > 解决方案 > 从另一个文件中的组件调用位于 Ionic Angular 页面上的函数

angular - 从另一个文件中的组件调用位于 Ionic Angular 页面上的函数

问题描述

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

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

loadData() {
    this.storageService.getData().then(datas=> {
      if (datas) {
        this.datas = datas;
        for(let data of datas) {
          this.average = this.average + (data.value / data.total);
        }
        this.average = (this.average / datas.length);
        this.average100 = this.average * 100;
      }
    });

我需要在 new-button.component.ts 上调用函数的地方：

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

    await popover.present();
  }

标签： angulartypescriptionic-framework

解决方案

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

角度组件是定义明确的封装单元，可以通过适当的组织方式与其他组件进行通信，而不仅仅是一个组件随机调用其他组件的方法。

你有几个选择

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

2.) 您可以将您案例中的公共代码loadData() 方法移动到@Injectable服务，并使用依赖注入将其引入new-button.component.ts文件。

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

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

https://dzone.com/articles/understanding-output-and-eventemitter-in-angular

https://medium.com/@manivel45/event-emitter-vs-subject-cross-component-communication-8934376605e1

https://netbasal.com/event-emitters-in-angular-13e84ee8d28c

谢谢。

推荐阅读