angular: хотите создать общую функцию в компоненте (а не в службе), чтобы из другого компонента могли использовать эту общую функцию - PullRequest
Новая
       17

angular: хотите создать общую функцию в компоненте (а не в службе), чтобы из другого компонента могли использовать эту общую функцию

0 голосов
/ 10 июля 2019

Я создаю динамический компонент диаграммы. Я хочу создать общую функцию на уровне компонента (не в метке службы), чтобы из разных компонентов можно было использовать эту общую функцию для разных служб, чтобы получить набор результатов другого типа.

Кто-нибудь может мне помочь, как это сделать? 

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', показанная выше, показывает записи на одной странице компонента, но есть несколько разных страниц, которые будут отображать один и тот же формат данных диаграммы, но с другой сервисной функцией.

Я могу вставить этот код во все компоненты с различными сервисными функциями, и он будет отображать данные, но в этом случае существует серьезная избыточность кода, которую я хочу избежать.

Может кто-нибудь предложить мне лучшее решение для достижения желаемого результата.

1 Ответ

0 голосов
/ 10 июля 2019

Вы можете рассмотреть возможность передачи функции вашему дочернему компоненту как @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

...