dinamicas - formularios en angular 6

Interfaz angular 2 para el servicio

Question

Quiero desarrollar un componente de búsqueda. Aquí está el caso de uso:

1. Este componente llama a un servicio con los parámetros de términos de búsqueda.
2. El servicio llama al punto final de la API y devuelve los objetos resultantes como una colección.
3. El componente muestra los resultados en la plantilla.

Quiero escribir solo un componente de búsqueda capaz de llamar a un servicio diferente según el caso. Imagina que tengo dos servicios:

1. SearchInMaleEmployeeService
2. SearchInFemaleEmployeeService

Ambos servicios implementan una función de búsqueda que devuelve una lista de empleados. Me gustaría decirle a mi componente qué servicio depende del caso. En C #, podemos usar la interfaz para decirle al constructor del componente qué servicio usar.

¿Cómo puedo hacer eso en Angular2?

Pregunta adicional: ¿Cómo puedo decirle a mi componente qué plantilla usar para representar los resultados de búsqueda según el tipo de objeto devuelto por el servicio?

Answer 1

Sí, puedes hacerlo como Sefa Ümit Oray respondió arriba. Pero según tengo entendido, estás tratando de filtrar dos tipos de objetos en la lista y quieres usar ambos. Entonces, ¿por qué no escribes un servicio que tiene dos métodos de búsqueda distintos? O puede escribir un método que busque en ambos tipos de objetos.

Como preguntas, puedes usar una instance of para verificar el tipo de objeto. Luego, use Pipe combine con ngIf para hacer lo que quiera.

https://angular.io/docs/ts/latest/guide/pipes.html https://angular.io/docs/ts/latest/api/common/index/NgIf-directive.html

Answer 2

Puede lograr esto a través de la inyección de dependencia.

Como dijiste, crea dos servicios diferentes implementando la misma interfaz ISearchService .

Al usar SearchComponent , proporcione la clase de servicio adecuada del módulo a ServiceComponent .

Su SearchComponent se vería como

  constructor(private searchService: ISearchService) {}

Y al usar SearchComponent en diferentes lugares, proporcione la instancia del servicio:

providers: [
  { provide: ISearchService, useValue: SearchInMaleEmployeeService}
]

o

providers: [
  { provide: ISearchService, useValue: SearchInFemaleEmployeeService}
]

Más información sobre la inyección de dependencia Angular2 aquí .

Actualizar:

Como lo señaló Ben

Proporcionar la declaración debe codificarse como

provide(''ISearchService'', {useClass: SearchInMaleEmployeeService})

Y para inyectar la clase a componente:

constructor(@Inject(''ISearchService'') private searchService:ISearchService) {}