如何从 angular 中的其他组件调用 function

Question

报告.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上调用 function getReports ？

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

例如在我的 report-list.ts 我有一个 function 这是

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

Answer 1

调用组件 function 不是一个好方法

而是创建一个服务并将此 function getReports添加到该服务并在您要调用此 function 的所有组件中使用此服务

Answer 2

兄弟组件之间的通信

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

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

服务事件：组件可以订阅服务事件。 例如，两个兄弟组件可以订阅相同的服务事件并通过修改各自的模型来响应。 更多关于这下面。

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

请检查以下示例。

    @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();
            }
        }

希望这会帮助你。

Answer 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();
  }
}

Answer 4

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

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