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

发布时间：2020-12-17 17:44:18 所属栏目：安全来源：网络整理

导读：我正在开发一个应用程序,它具有Restful API for backend和Angular2 for frontend. 我想在视图中有两个图表.比如,一个图表是员工出勤,另一个图表是产品销售.每个API都有一个API可用于从服务器获取数据. 我该怎么计划呢？我是否应该拥有一个员工出勤和一个产

我正在开发一个应用程序,它具有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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!