Typescript Angular2服务加载JSON，并返回特定的JSON节点/属性

我目前正在自学安格，并且有一些出牙的问题（至少可以说）。无论如何，我希望创建一个加载静态JSON文件的服务。目前我正在使用i18n文件，因为它们已经构建了JSON。该服务还将有一个方法，该方法将接受一个传递的参数（一个参数），然后查找带有传递参数名称的JSON属性。听起来很简单，但我有几个问题，首先是我的服务，我想象中称之为ContentService，文件是content.service.ts

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http'

@Injectable()
export class ContentService {

    loadedContent: any; // will create a real type later

    constructor(private http: Http) {

        // 1. Determine the language
        let userLang:string = navigator.language.split('-')[ 0 ];
        userLang = /(en|de)/gi.test(userLang) ? userLang : 'en';

        // 2. Load the file... I should really use interpolation for the file path
         this.http.get('src/i18n/' + userLang + '.json').map((res:Response) => res.json()).subscribe(res => this.loadedContent = res);
    }

    getContent(selector) {

        // in here we need to pass the selector and fetch the content from the loaded JSON, however for now I will just return the passed selector and see if I have access to the loadedConent
        console.log(selector, this.loadedContent); // this.loadedContent is undefined!
        // we need a catch for we the selector is not found....
    }
}

在另一个组件中，我导入服务

import { ContentService } from '../content/content.service';

@Component({
    selector: 'angular2-test',
    providers: [ ContentService ],
    templateUrl: 'src/home/home.template.html'
})

export class TestComponent {

    content: any; // real type to come later

    constructor(private contentService: ContentService) {
        this.content = this.contentService.getContent('promotion')
    }
}

{
  "promotion": {
    "pageTitle": "Oh we have a lovely promotion today..."
  }
}

现在很明显，我有一点错误，因为在我的getContent方法中，我无法访问this.loadedContent，在控制台中，我返回“

欠定义”

”。如何让我的方法访问我的服务的

loadedContent

属性

顺便说一句：这是我的静态JSON文件的内容，它正在服务中加载

import { ContentService } from '../content/content.service';

@Component({
    selector: 'angular2-test',
    providers: [ ContentService ],
    templateUrl: 'src/home/home.template.html'
})

export class TestComponent {

    content: any; // real type to come later

    constructor(private contentService: ContentService) {
        this.content = this.contentService.getContent('promotion')
    }
}

{
  "promotion": {
    "pageTitle": "Oh we have a lovely promotion today..."
  }
}

---

提前谢谢

我会重新设计您的服务，使其异步化：

import {Observable} from 'rxjs/Rx';

@Injectable()
export class ContentService {
  loadedContent: any; // will create a real type later
  obs: Observable<any>;

  constructor(private http: Http) {
    let userLang:string = navigator.language.split('-')[ 0 ];
    userLang = /(en|de)/gi.test(userLang) ? userLang : 'en';

    this.obs = this.http.get('src/i18n/' + userLang + '.json')
      .map((res:Response) => res.json())
      .do(res => this.loadedContent = res);
  }

  getContent(selector) {
    if (this.loadedContent) {
      return Observable.of(this.loadedContent);
    } else {
      return this.obs;
    }
  }
}

另一个选项也可以是异步引导应用程序。有关更多详细信息，请参见此问题：

---

谢谢，不过我想我也需要给这个.obs一个类型/在我的服务顶部声明它？我还需要从RxJSGreat导入Observable，也谢谢你的链接！我确实收到了关于“unresolved method or function of（）”的警告，但我可以接受，现在我可以编写代码来返回所需的节点（实际的JSON要大得多）！谢谢！不客气；-）奇怪的警告？它是在你的编辑器中还是在你用tsc编译你的应用程序时？我还有一个问题，可以聊一会儿吗？