Angular2 - 重用具有不同服务/提供者的组件

Question

我正在开发一个应用程序,它具有Restful API for backend和Angular2 for frontend.

我想在视图中有两个图表.比如,一个图表是员工出勤,另一个图表是产品销售.每个API都有一个API可用于从服务器获取数据.

我该怎么计划呢？

我是否应该拥有一个员工出勤和一个产品销售两个组件,而这又将使用他们自己的服务并获取数据并填充组件？

要么

我应该只有一个组件作为"图表"吗？在这种情况下如何获取数据？有没有关于服务的机制/良好做法来实现这一目标？

尝试在线搜索无法获得任何相关指南.

请帮忙.谢谢.

Answer 1

这就是我实现它的方式,更多的是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>