Question

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

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

我该如何计划？

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

OR

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

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

请帮忙。谢谢。

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>

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>

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

2 个答案: