如何以角度从其他组件调用函数答案

【问题标题】：How to call a function from other component in angular如何以角度从其他组件调用函数
【发布时间】：2020-09-05 01:59:31
【问题描述】：

report.ts

getReports() {
    this.loading.today = true;
    this.loading.daily = true;

    const severities = ['LOW', 'MEDIUM', 'HIGH', 'URGENT'];
    const reportModules = [
      { url: '', params: { to: format(TODAY, DATE_FORMAT).toString(), from: format(TODAY, DATE_FORMAT).toString() } },
      {
        url: 'application-and-severity',
        params: { to: format(TODAY, DATE_FORMAT).toString(), from: format(TODAY, DATE_FORMAT).toString() }
      },
      {
        url: 'application-and-severity-and-date',
        params: {
          to: format(endOfWeek(TODAY), DATE_FORMAT).toString(),
          from: format(startOfWeek(TODAY), DATE_FORMAT).toString()
        }
      },
      {
        url: 'application-and-status',
        params: {
          to: format(endOfWeek(TODAY), DATE_FORMAT).toString(),
          from: format(startOfWeek(TODAY), DATE_FORMAT).toString()
        }
      }
    ];
}

如何在我的report-list.ts上调用函数getReports？

我想要的是调用函数getReports到report-list.ts。

例如，在我的 report-list.ts 中，我有一个函数是

saveData() { ... } 在 saveData 我想要的是从report.ts调用函数getReports

【问题讨论】：

您必须在注入该服务后创建服务并使用该功能多个组件
如果它的子组件那么你可以使用事件发射器
@SantoshShinde 你有事件发射器的例子吗？
是的，请检查答案

标签： javascript angular typescript

【解决方案1】：

调用组件函数不是个好办法

改为创建一个服务并将此函数 getReports 添加到该服务中，并在您要在其中调用此函数的所有组件中使用此服务

【讨论】：

【解决方案2】：

兄弟组件之间的通信

共享应用程序模型：兄弟姐妹可以通过共享应用程序模型进行通信（就像 angular 1 一样）。例如，当一个兄弟姐妹对模型进行更改时，绑定到同一模型的另一个兄弟姐妹会自动更新。

组件事件：子组件可以使用@Output() 绑定向父组件发出事件。父组件可以处理事件，并操纵应用程序模型或它自己的视图模型。对应用程序模型的更改会自动传播到直接或间接绑定到同一模型的所有组件。

服务事件：组件可以订阅服务事件。例如，两个兄弟组件可以订阅相同的服务事件并通过修改各自的模型来响应。更多内容请参见下文。

如需更多帮助，请查看此link。

请检查以下示例。

    @Injectable()
    export class CustomService {
        getReport = () => {}
    }

    // here you can use service
    export class ListReportComponent {
      constructor(private custom CustomService){}

       ngOnInit() {
        // this will emit the event and call the getReport
        this.custom.getReport();
       }
   }

还有另一种使用事件发射器的方法，但这取决于您的组件（父/子）之间的关系，但制作通信组件的最佳/通用方式是使用共享服务。

        import { Component, EventEmitter, Input, Output } from '@angular/core';

        List Component

        getReport = () => {
            // your code
        }
        <list-report [getReport]="getReport">Disagree</list-report>

        ListReportComponent

        export class ListReportComponent {
            @Output() getReport = new EventEmitter<>();

            ngOnInit() {
                // this will emit the event and call the getReport
                this.getReport.emit();
            }
        }

希望这会对你有所帮助。

【讨论】：

【解决方案3】：

应该使用服务或一些辅助函数取决于用例，但如果我们真的想访问 Angular 中 Parent Component 中的 child component 的方法，可以按如下方式完成：

import { Component } from "@angular/core";

@Component({
  selector: "report",
  template: '<div>hi this is template</div>',
  styles:[]
})
export class ReportComponent {
  getReport() {
    console.log('hi get report')
  }
}

import { Component, ViewChild } from "@angular/core";
import { ReportComponent } from "./report.component";

@Component({
  selector: "report-list",
  template: `<div>
      <h4 (click)="callGetReport()">This is report List</h4>
      <report></report>  
  </div>`,
  styles: []
})
export class ReportListComponent {
  @ViewChild(ReportComponent) public report: ReportComponent;

  callGetReport() {
    this.report.getReport();
  }
}

【讨论】：

【解决方案4】：

没有官方方法可以调用或访问另一个函数/数据零件。所以我们应该避免它。
这两个组件可以通过使用输入相互交互，仅输出属性。通过将输入参数作为子项传递组件通过使用 input 属性，您可以执行一些对子组件的操作。

一种解决方案是创建一个服务并在那里使用事件发射器。您可以将 getReports() 函数移动到服务中，并将其注入到需要此函数的组件中。

【讨论】：