使用可观察对象通过单个 http 调用更新多个组件属性

Question

上一个post相关：

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

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，结果成功地给我：

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 : 我注意到两件事 :

我没有错误，但我需要更多东西来更新我的 dico 文本
我可能需要 .complete() 我的可观察对象，但我真的不知道什么时候。

我对 RxJS 比较菜鸟，我需要更多时间来理解它们，所以请耐心等待我...

Answer 1

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

  @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>

或

使用可观察对象通过单个 http 调用更新多个组件属性

Update several component properties with a single http call using observables

observable

rxjs

angular