angular - 如何在 Angular 2中将对象从服务返回到组件？

Question

我想将结果数组从atom.service 获取到atom.component 中。我想我可以将结果数组引入到atom.component中，并使用下面的源代码(未提供完整代码)。但我发现我无法从下面的源代码访问atom.component中的this.atoms。 atom.service.ts 中的结果数组已成功创建。如果有人知道如何访问atom.component中的结果数组，你能提供一些指导吗？

atom.service.ts

getAtoms(private newConcept: string) {
    this.http.get('api/atoms.json')
    .map( (responseData) => {return responseData.json()})
    .subscribe( data => {   
        let results:Array<RAtom> = [];
        for (i = 0; i < data.result.length; i++) { 
            results.push(new RAtom(data.result[i].classType, data.result[i].ui));
        }
        return results;
    });
}

atom.component.ts

atoms: Array<RAtom>;

searchAtoms(newConcept: string) {
    if (newConcept) {
    this.atoms = this.service.getAtoms(newConcept);
    }
}

RAtom.ts

export class RAtom {
    classType: string;
    ui: string;

    constructor(classType: string, ui:string) {
      this.classType = classType;
      this.ui = ui;
    }
}

Answer 1

您无法从异步执行返回到同步执行。

不要在 getAtoms() 中订阅，而是让调用者订阅，然后他可以传递一个回调，当数据到达时调用该回调:

getAtoms(private newConcept: string) {
    return this.http.get('api/atoms.json')
    .map( (responseData) => {return responseData.json()})
    //.subscribe( data => {   
    .map( data => {    
        let results:Array<RAtom> = [];
        for (i = 0; i < data.result.length; i++) { 
            results.push(new RAtom(data.result[i].classType, data.result[i].ui));
        }
        return results;
    });
}

atoms: Array<RAtom>;

searchAtoms(newConcept: string) {
    if (newConcept) {
      this.service.getAtoms(newConcept)
      .subscribe(result => this.atoms = result;
    }
}