angular - 角度:想在组件中创建一个通用功能(不在服务中),以便不同组件可以共享该通用功能
问题描述
我正在创建一个动态图表组件。我想在组件级别(不在服务标签中)创建一个通用功能,以便不同组件可以与不同服务共享该通用功能以获得不同类型的结果集。
任何人都可以帮助我,如何做到这一点?
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”功能在一个组件页面中显示记录,但是有多个不同的页面将显示相同格式的图表数据,但具有不同的服务功能。
我可以将此代码粘贴到具有不同服务功能的所有组件上,它会显示数据,但在这种情况下,我想避免严重的代码冗余。
任何人都可以建议我一个更好的解决方案来实现所需的输出。
解决方案
您可以考虑将函数作为@Input 传递给您的子组件,例如:
<hello [getData]="getName"></hello>
它在子组件中声明为
@Input() getData: (param: string) => Observable<string>;
请注意,在父组件中,我们需要在箭头函数中定义函数以获取正确的this
上下文。
getName = (input: string) => {
return of(input + this.append);
}
您可以将部分替换of
为 HTTP 调用。
推荐阅读
- inno-setup - Inno Setup 卸载文件大小急剧增加
- powershell - Powershell 按数字显示每个变量
- assembly - MIPS:如何在此循环的每个打印语句之前添加一个数字?
- java - 实现地图功能
- c# - 我可以让 ContentDialog.Async() 在 UWP 中等待另一个 ContentDialog.Async() 吗?
- javascript - 通过 Javascript/JQUERY 中的某个“提交”按钮提交表单
- java - 如何禁用多部分流式传输 apache cxf
- python - 如何将具有不同长度的行放在一个数组或python中的列表中?
- javascript - 如何在 JavaScript 中动态跟踪用户输入?
- ef-code-first - 由于 SQL 异常错误,无法将电子邮件属性保存到 sql 中:“不允许空插入”,除非属性不为空??(ORM 代码优先)