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

Question

我正在开发一个应用程序，它具有用于后端的 Restful API 和用于前端的 Angular2。

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

我应该如何计划？

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

或

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

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

请帮忙。谢谢。

Answer 1

这就是我的实现方式，更像是一种面向对象的方式。

服务：

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>

Answer 2

如果您提供的信息很难回答构建两个不同或单个组件是否是个好主意。

你可以

• 在父级中注入服务并将其传递给图形组件的输入。

• 将这两个服务注入到图形组件中，并将参数传递给一个输入，告诉图形组件使用哪个服务

• 创建一项服务，为员工出勤和产品销售数据提供方法，并使用图形组件中的输入来告诉它应该使用什么方法。

• 使用已注册您希望图形组件使用的提供程序的父组件。当图形组件注入服务时，它会获得父级提供的服务。

@Component({
  input: 'my-graph',
  template: ' show the graph here '
})
class MyGraphComponent {
  @Input() data;
}

@Component({
  input: 'employee-attendance-graph',
  template: '<my-graph [data]="data"></my-graph>'
})
class EmployeeAttendanceGraph {
  constructor(private data:Service1) {}
}

@Component({
  input: 'product-sales-graph',
  template: '<my-graph [data]="data"></my-graph>'
})
class ProductSalesGraph {
  constructor(private data:Service2) {}
}

然后像这样使用它

<employee-attendance-graph></employee-attendance-graph>
<product-sales-graph></product-sales-graph>