使用Observables通过一个http调用更新几个组件属性 [英] Update several component properties with a single http call using observables

问题描述

先前的相关帖子: Angular2:减少Http调用次数

上下文仍然相同:我正在尝试设置一个"dico"组件，该组件在输入中需要一个ID和一种语言，并且应该从我的数据库中给我一些翻译的文本.

The context is still the same : I'm trying to setup a "dico" component, that need an ID and a Language in input, and should give me some translated Text from my database.

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 {

}  

在HTML文件中使用:

<dico [dicoID]="dicoService.getDico('211800', 'en') | async"></dico>
<dico [dicoID]="dicoService.getDico('211801', 'en') | async"></dico>

在.ts中带有以下代码:

ngAfterViewInit() {
    this.dicoService.sendRequest();
}

我正在调用"dicoService"以订阅这些"dico"，然后将请求发送到我的API，该API成功地为我提供了结果:

I'm calling the "dicoService" to subscribe to these "dico"s and then send the resquest to my API that successfully gives me the results :

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

NB:我注意到了两件事:

1. 我没有错误，但是我还需要一些其他信息来更新我的dico文本
2. 我可能需要.complete()我的可观察对象，但我真的不知道何时.

我对RxJS相当了解，我需要更多时间来理解它们，所以请耐心等待我...

I'm quite a noob with RxJS, and I need more time to understand them so please be patient with me...

推荐答案

我不知道到底是什么问题，但我会像这样更改组件

I don't know what the problem is exactly, but I would change the component like

  @Component({
    selector: 'dico',
    template: `{{text | async}}`  
  })

  class Dico implements OnChanges {
    // Définition des paramètres et du texte en sortie
    @Input() private dicoID: string;
    @Input() private dicoLang: string;
    public text: Observable<String> = null;

    constructor(private dicoService: DicoService) {}

    ngOnChanges() {
      if(dicoId && dicoLang) {
        this.text = dicoService.getDico('211800', 'en');
      }
    }
  }

然后您可以将其与

<dico dicoID="211800" lang="en"></dico>

或

这篇关于使用Observables通过一个http调用更新几个组件属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！