Как использовать услугу angular 2 с Ionic 2

Ответ 1

Использовать Bootstrap() в Ionic2 не нужно, только использование @App для объявления вашего приложения. Вам еще нужно объявить свою службу в своем компоненте @Page.

Создайте свой сервис

import {Injectable} from "angular2/core";
import {Http} from "angular2/http";

@Injectable()
export class DataService {
  constructor(http: Http) {
    this.http = http;
    this.data = null;
  }

  retrieveData() {
    this.http.get('./mocks/test.json')
    .subscribe(data => {
      this.data = data;
    });
  }

  getData() {
    return this.data;
  }
}

Затем используйте его в своем @Page

import {Page} from 'ionic/ionic';
import {DataService} from './service';

@Page({
  templateUrl: 'build/test.html',
  providers: [DataService]
})
export class TestPage {
  constructor(data: DataService) {
    data.retrieveData()
  }
}

Ответ 2

Обновление RC:

Начиная с Ionic2 RC, теперь службы должны быть включены в массив providers из @NgModule, чтобы эти службы работали как синглеты (что означает, что один и тот же экземпляр будет использоваться в всего приложения).

@NgModule({
  declarations: [
    MyApp,

    // Pages
    Page1,
    Page2,

    // Pipes
    MyCustomPipe,

    // Directives
    MyCustomDirective,
  ],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,

    // Pages
    Page1,
    Page2
  ],
  providers: [ DataService, NavigationService, Storage, ... ] // <- here!
})
export class AppModule {}

Старый ответ (2.0.0-beta.8)

На всякий случай, если это может помочь другим разработчикам Ionic2, с выпуском 2.0.0-beta.8, теперь мы может использовать ionicBootstrap, чтобы наши службы работали как singletons, означающие, что один и тот же экземпляр будет использоваться во всем приложении.

Изменения, необходимые для этого, минимальны; ваши услуги будут оставаться теми же

/* Notice that the imports have slightly changed*/
import {Injectable} from "@angular/core";
import {Http} from "@angular/http";
import 'rxjs/Rx';

@Injectable()
export class DataService {
  constructor(http: Http) {
    this.http = http;
    this.data = null;
  }

  retrieveData() {
    this.http.get('./mocks/test.json')
    .subscribe(data => {
      this.data = data;
    });
  }

  getData() {
    return this.data;
  }
}

Но вместо того, чтобы вводить его как provider в ваш Component (что приведет к созданию нового экземпляра service при каждом загрузке Component)

import {Component} from '@angular/core';
import {DataService} from './service';

@Component({
  templateUrl: 'build/test.html'
  /* This should not be done anymore */
  /* providers: [DataService] */
})
export class TestPage {
  constructor(data: DataService) {
    data.retrieveData()
  }
}

Просто включите его в ionicBootstrap вашего файла app.ts, , чтобы гарантировать, что один и тот же экземпляр службы будет использоваться во всем приложении.

ionicBootstrap(MyApp, [DataService], {});

Angular Руководство по стилю:

Следуя Angular2 Руководство по стилю

Предоставлять услуги инжектору Angular 2 в самом верхнем компонент, в котором они будут доступны.

Почему? Инжектор Angular 2 является иерархическим.

Почему? При предоставлении услуги компоненту верхнего уровня, экземпляр является общим и доступен для всех дочерних компонентов этого верхнего уровня.

Почему? Это идеально, когда служба использует методы или состояние.

И

Это сработает. Это просто не лучшая практика. Поставщик начальной загрузки опция предназначена для настройки и переопределения Angular собственных предварительно зарегистрированные службы, такие как поддержка маршрутизации.

Итак, вместо регистрации службы в ionicBootstrap нам нужно зарегистрировать ее в самом верхнем компоненте нашего приложения (если мы хотим использовать один и тот же экземпляр во всем приложении), например:

@Component({
  templateUrl: 'build/app.html',
  directives: [...],
  providers: [..., DataService]
})
class MyApp{ 
  // ...
}