我正在开发一个应用程序,它具有Restful API for backend和Angular2 for frontend.
我想在视图中有两个图表.比如,一个图表是员工出勤,另一个图表是产品销售.每个API都有一个API可用于从服务器获取数据.
我该怎么计划呢？
我是否应该拥有一个员工出勤和一个产品销售两个组件,而这又将使用他们自己的服务并获取数据并填充组件？
要么
我应该只有一个组件作为“图表”吗？在这种情况下如何获取数据？有没有关于服务的机制/良好做法来实现这一目标？
尝试在线搜索无法获得任何相关指南.
请帮忙.谢谢.
解决方法
这就是我实现它的方式,更多的是OOP方式.
服务：
export interface IGraphServices {
getGraphData(): string;
}
@Injectable()
export class EmployeeAttendanceService implements IGraphServices {
getGraphData(): string {
return "Employee Attendance Data";
}
}
@Injectable()
export class ProductSalesService implements IGraphServices {
getGraphData(): string {
return "Product Sales Data";
}
}
零件：
@Component({
selector: 'graph',template: '<div>Graph component</div>'
})
export class GraphComponent implements OnInit {
@Input('service') service: number;
constructor(@Inject('IGraphServices')private providerService: IGraphServices[]) {
}
ngOnInit(): void {
console.log(this.providerService[this.service].getGraphData());
}
}
在您的NgModule提供程序中：
providers: [
{
provide: 'IGraphServices',useClass: EmployeeAttendanceService,multi: true
},{
provide: 'IGraphServices',useClass: ProductSalesService,multi: true
}
]
用法：
<!-- EmployeeAttendanceService --> <graph [service]="0"></graph> <!-- ProductSalesService --> <graph [service]="1"></graph>
