角度：想在组件中创建一个通用功能（不在服务中），以便不同组件可以共享该通用功能答案

【问题标题】：angular : want to create a common function in component (not in service) so that from the different component can share that common function角度：想在组件中创建一个通用功能（不在服务中），以便不同组件可以共享该通用功能
【发布时间】：2019-07-10 17:13:29
【问题描述】：

我正在创建一个动态图表组件。我想在组件级别（而不是服务标签）创建一个通用功能，以便不同组件可以与不同服务共享该通用功能以获得不同类型的结果集。

谁能帮帮我，怎么办？

public fetchSearchRecords(value): void {
    this.dataDisplay = true;
    this.isLoading = true;
    if (value.from_date) {
      this.from_date = moment(value.from_date).format('YYYY-MM-DD');
    }
    if (value.to_date) {
      this.to_date = moment(value.to_date).format('YYYY-MM-DD');
    }
    if (value.select_duration) {
      this.select_duration = value.select_duration;
    } else {
      this.select_duration = '';
    }

    this.doughnutChartService
      .getEmployeeAttritionRecords(
        this.select_duration,
        this.from_date,
        this.to_date
      )
      .subscribe(
        result => {
            // console.log('result==',result);
            this.isLoading = false;          
            this.empBandAttritionRecords = result['employee_band'];
            this.clientAttritionRecords = result['client'];
            const empBandMgmtLabelIds = [];
            const empBandMgmtLabel = [];
            const empBandMgmtLabelData = [];
            const empBandMgmtAttritionCount = [];
            let empBandArray = result['employee_band'];
            let clientArray = result['client'];
            let costCenterArray = result['cost_center'];
            let unitArray = result['unit'];
            let subUnitArray = result['sub_unit'];
            let domainArray = result['domain'];

            // EMP BAND MGMT RECORDS
            for (empBandArray in result) {
                if (result.hasOwnProperty(empBandArray)) {
                    if (empBandArray === 'employee_band') {
                        // tslint:disable-next-line: forin
                        for (let innerKey in result[empBandArray]) {
                            empBandMgmtLabelIds.push(result[empBandArray][innerKey].id);
                            empBandMgmtAttritionCount.push(
                            result[empBandArray][innerKey].attritions
                          );
                            empBandMgmtLabel.push(
                                result[empBandArray][innerKey].employee_band
                            );
                            empBandMgmtLabelData.push(
                                result[empBandArray][innerKey].attrition_percentage
                            );                  
                        }
                    }
                }
            }
        },
        error => {
          this.error = true;
          this.errorMsg = 'Sorry! Some error happen';
        }
    );
}

在html中，

<div *ngIf="dataDisplay && !isLoading">
    <div class="row" *ngIf="!error">
        <div class="col-md-4">
            <div class="card">
                <div class="card-header card-header-icon card-header-rose">
                  <div class="card-icon">
                    <i class="material-icons">insert_chart</i>
                  </div>
                  <h4 class="card-title">Employee Band</h4>
                </div>
                <div class="card-body">
                  <app-commo-doughnut-chart
                    [doughnutChartLabels]="ChartLabelEmpBand"
                    [doughnutChartData]="ChartLabelDataEmpBand"
                    [chartFilter]="empBandFilter"
                    [labelIds]="ChartLabelIdEmpBand"
                    [attritionCount]="ChartLabelEmpBandAttritionCount"
                  ></app-commo-doughnut-chart>
                </div>
            </div>
        </div>
    </div>
</div>

现在上面的“fetchSearchRecords”功能在一个组件页面中显示记录，但是有多个不同的页面将显示相同格式的图表数据，但具有不同的服务功能。

我可以将此代码粘贴到具有不同服务功能的所有组件上，它会显示数据，但在这种情况下，我想避免严重的代码冗余。

任何人都可以建议我一个更好的解决方案来实现所需的输出。

【问题讨论】：

使用服务共享它似乎是一个很好的解决方案。 stackoverflow.com/questions/50589902/…
如果您需要与多个组件共享相同的功能，您可以拥有一个具有该功能的父组件类，并在您需要使用相同功能的所有其他组件中扩展该类。
使用服务是一个很好的解决方案，但是你也可以创建一个类并在这个类中定义你的函数，然后你可以从这个类中扩展你的组件

标签： angular ng2-charts

【解决方案1】：

您可以考虑将一个函数作为@Input 传递给您的子组件，例如：

<hello [getData]="getName"></hello>

在子组件中是这样声明的

@Input() getData: (param: string) => Observable<string>;

请注意，在父组件中，我们需要在箭头函数中定义函数，以使其获得正确的this 上下文。

getName = (input: string) => {
  return of(input + this.append);
}

您可以将 of 部分替换为 HTTP 调用。

完整示例：https://stackblitz.com/edit/angular-j876oc

【讨论】：