Question

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

settings.page.ts（包含该功能的页面）上的功能：

day_lookup

我需要在new-button.component.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;
      }
    });

Answer 1

对于此特定需要，您首先需要了解组件通信是如何成角度地工作的。

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

您有几个选择

1。）您可以在调用的组件中引入 EventEmitters ，并在要对其运行方法的组件中监听该事件。提供了链接的组件（父->子关系）

2。）您可以将常用代码 loadData（）方法移至 @Injectable 服务，并使用依赖注入在新功能中进行介绍-button.component.ts 文件。

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

请在主题上找到这几个链接

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

谢谢。

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

1 个答案: