Angular 2 - 将数据从服务传递到组件

Question

我创建了一个调用 api 来获取一些数据的服务。我想将其返回给调用组件。

这就是我所拥有的:

SomeComponent() {
 someData = string;
 constructor(
        private _configService: SomeService
    )
    {
       var value = this._configService.getKey('some-key');
       console.log(value);
    }
}

然后我有一个服务:

export class ConfigService {

    response:any;

    constructor(private _http:Http) {}

    getConfig(): Observable<any>
    {
        return this._http.get('src/config/config.json')
            .map(response => response.json()).publishLast().refCount();
    }

    getKey(key:string) {
        this.getConfig()
            .subscribe(
                data => {

                    if (data[key] != 'undefined')
                    {
                        return data[key]
                    } else {
                        return false;
                    }

                },
                error => {
                    return false;
                }
            );

    }

}

这个想法是我可以调用方法 getKey('some-key') ，如果返回的 json 数组中存在该键，则返回数据。如果不是，则返回 false。

当它运行时，我可以看到该对象正在服务中返回，但是它没有返回到组件，而是“未定义”。

正确返回这个的过程是什么？

Answer 1

您的问题是您的处理是异步的，并且您在回调中返回而不是在调用方法中返回。

我将使用 map 运算符来实现此目的:

getKey(key:string) {
    return this.getConfig().map(data => {
      if (data[key] != 'undefined') {
        return data[key];
      } else {
        return false;
      }
    );
}

在组件中:

SomeComponent() {
  someData = string;
  constructor(
    private _configService: SomeService
  ) {
    this._configService.getKey('some-key').subscribe(value => {
      console.log(value);
    });
}

}