Ionic2 / angular2 правильный способ использования сервиса

Я учусь создавать приложение Ionic-2, у меня есть несколько компонентов, которые потребляют службы, которые выполняют HTTP-вызов и извлекают некоторые данные, которые, в свою очередь, будут установлены в компоненте и, наконец, будут отображаться в шаблоне. Я в целом понял поток, но при кодировании делаю логическую ошибку.

Мой пример компонента:

export class FarmList {

  items: Object;

  constructor(private testService: TestService, public nav: NavController){}

  getData(): any {

    this.items = this.testService.fetchData()

  }

  nextView(){

    this.nav.push(Farm)

  }

  showDetails(id: Number){

    this.nav.push(Farm, {
      param1: id
    })

  }
}

Моя соответствующая служба:

@Injectable()
export class TestService{

    loading: boolean;
    data: Object;

    constructor(private http: Http){

        let myUrl = 'http://jsonplaceholder.typicode.com/users';

        this.loading = true;
        this.http.request(myUrl)
          .subscribe(
            (res: Response) => {

            this.loading=false;
            this.data=res.json();

          });

    }

    public fetchData(){

        return this.data;

      }
}

Снимок экрана приложения:

Итак, проблема здесь:

• Пока я не нажму кнопку Fetch (которая вызывает функцию getData () в компоненте), данные не будут загружены, так или иначе в конструкторе компонента данные должны быть установлены и не когда я вызываю getData() функцию. Я попытался написать this.items = this.testService.fetchData() эту строку в конструкторе, но это не сработало.

• Эта проблема еще больше усугубляется, когда в другом компоненте и службе мне нужно добавить navparam, отправленный из этого компонента FarmList: let myUrl = 'http://jsonplaceholder.typicode.com/users/' + this.id ; Я пытаюсь добавить this.id, для которого установлено значение полученного navparam в его конструкторе, и я получаю undefined

  конструктор (частный nextService: NextService, navParams: NavParams) {this.id = navParams.get ("param1"); }

Я просто пытаюсь создать список на одной странице, а затем щелчок по одному из элементов списка откроет новую страницу с более подробной информацией. Я использую этот общедоступный API: http://jsonplaceholder.typicode.com/users/ и затем добавляя к нему какое-то число, чтобы получить только один объект.

Как это правильно сделать?

ОБНОВЛЕНИЕ: Я мог бы решить вторую проблему, просто получив navParams в конструкторе службы и добавив его к URL-адресу следующим образом:

@Injectable()
export class NextService{

    loading: boolean;
    data: Object;
    id: Number;

    constructor(private http: Http, navParams: NavParams){

    this.id = navParams.get("param1");
    console.log("Second service fetching param: " + this.id)

        let myUrl = 'http://jsonplaceholder.typicode.com/users/' + this.id ;
...
}