Как пользоваться сервисом angular 2 с Ionic 2?

Question

Я новичок в Ionic 2. Я прочитал в угловых 2 документа, что сервис должен быть введен во время загрузки приложения. Но не смог увидеть ничего из начальной загрузки во время прохождения урока Ionic 2.

Любая помощь высоко ценится.

Answer 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()
  }
}

Answer 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-бета.8)

На всякий случай, если это может помочь другим Ionic2 разработчики, с выпуском 2.0.0-бета.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], {});

---

Угловое руководство по стилю:

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

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

Зачем? Угловой 2 инжектор является иерархическим.

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

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

А также

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

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

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

Answer 3

Ищите Ionic Provider: в ионных сервисах вместо сервисов angular мы используем ionic Provider, они обеспечивают концепцию внедрения зависимостей в Ionic.

генерировать ионный провайдер

ionic generate provider <provider name>

а затем импортируйте провайдера в корневую страницу или страницу, на которой он должен быть использован

и положить в массив провайдера