Pregunta Angular2 - componente de reutilización con diferentes servicios / proveedores


Estoy desarrollando una aplicación que tiene Restful API para back-end y Angular2 para frontend.

Quiero tener dos gráficos en una vista. Digamos que un gráfico es de asistencia de empleados y otro es de ventas de productos. Una API para cada uno está disponible para obtener datos del servidor.

¿Cómo debería planearlo?

¿Debería tener dos componentes, uno de asistencia de empleados y otro de ventas de productos, que a su vez utilizará sus propios servicios y obtendrá datos y llenará el componente?

O

¿Debo tener solo un componente como 'gráfico'? En este caso, ¿cómo recuperar datos? ¿Existe algún mecanismo / buenas prácticas sobre los servicios para lograr esto?

Intentado buscar en línea no pudo obtener ninguna guía relevante.

Por favor ayuda. Gracias.


5
2017-09-16 12:44


origen


Respuestas:


Así es como lo implementaría, una forma más de OOP.

Servicios:

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";
  }
}

Componente:

@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());
  }
}

En sus proveedores de NgModule:

providers: [
    {
      provide: 'IGraphServices', useClass: EmployeeAttendanceService, multi: true
    },
    {
      provide: 'IGraphServices', useClass: ProductSalesService, multi: true
    }
]

Uso:

<!-- EmployeeAttendanceService -->
<graph [service]="0"></graph>

<!-- ProductSalesService -->
<graph [service]="1"></graph>

7
2017-09-16 19:21



Si es una buena idea construir dos componentes diferentes o un componente único, es difícil responder con la información que proporcionó.

Usted puede

  • Inyectar el servicio en el padre y pasarlo a una entrada del componente gráfico.

  • Inyectar ambos servicios en el componente gráfico y pasar un parámetro a una entrada que le dice al componente gráfico qué servicio usar

  • cree un servicio que proporcione métodos para la asistencia de los empleados y los datos de ventas de productos y use una entrada en el componente del gráfico para decirle qué método debe usar.

  • use un componente principal que tenga el proveedor registrado que desee que use el componente de gráfico. Cuando el componente gráfico inyecta el servicio obtiene el proporcionado por el padre.

@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) {}
}

Entonces úsalo como

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

0
2017-09-16 13:01



Preguntas populares