Actualice varias propiedades de componentes con una sola llamada http usando observables
Publicación anterior relacionada: Angular2: reduce el número de llamadas Http
El contexto sigue siendo el mismo: estoy tratando de configurar un componente "dico", que necesita una ID y un idioma de entrada, y debería darme un texto traducido de mi base de datos.
dico.component.ts:
@Component({
selector: 'dico',
template: `{{text}}` // => The text I'm trying to update
})
class Dico implements AfterViewInit {
// Définition des paramètres et du texte en sortie
@Input() private dicoID: string;
@Input() private dicoLang: string;
public text: string = null;
constructor(private dicoService: DicoService) {
}
(...)
}
@Component({
template: `<dico [dicoID] [dicoLang]></dico>`,
directives: [Dico]
})
export class DicoComponent {
}
uso en un archivo HTML:
<dico [dicoID]="dicoService.getDico('211800', 'en') | async"></dico>
<dico [dicoID]="dicoService.getDico('211801', 'en') | async"></dico>
con el siguiente código en el .ts:
ngAfterViewInit() {
this.dicoService.sendRequest();
}
Llamo al "dicoService" para suscribirme a estos "dico" y luego enviar la solicitud a mi API que me da los resultados con éxito:
dico.service.ts:
@Injectable()
export class DicoService {
private subjects = []
private ids: string[] = [];
(...)
getDico(id: string, lang: string): Observable<DicoComponent> {
if (id != null) {
let singleSubject = this.subjects[id];
if (!singleSubject) {
this.ids.push(id);
singleSubject = new Subject();
this.subjects[id] = singleSubject;
}
return singleSubject.asObservable().share().take(1);
}
}
sendRequest() {
// Stuff to call the ASP Controller that calls the API
(...)
this.http.get(lControllerFullURL + lHttpRequestBody)
.map((res: any) => res.json())
.subscribe(data => {
// Gestion du retour du WebService
switch (data.status) {
case "success":
let l_cRet: string = null;
// Response is looking like that : {"status":"success",
// "results"://{"211800":"Compétences obligatoires",
"211801":"Toutes les compétences"}}
for (l_cRet in data.results) {
let l_dicoID = l_cRet; // My DicoID
let l_dicoText = data.results[l_cRet]; // the text
if (!l_dicoText.includes("UNDEFINED")) {
// Trying to send the text to the corresponding dicoID here
this.subjects[l_dicoID].next(l_dicoText);
}
else {
(...)
}
}
break;
(...)
}
});
}
N.B: Noté dos cosas:
No tengo ningún error, pero necesito algo más para actualizar mis textos de dicoProbablemente necesito .completar () mis observables pero realmente no sé cuándo.Soy un novato con RxJS, y necesito más tiempo para comprenderlos, así que por favor sean pacientes conmigo ...