web-dev-qa-db-fra.com

Comment utiliser le service angulaire 2 avec Ionic 2?

Je suis nouveau dans Ionic 2. Je lis dans 2 docs angulaires que ce service doit être injecté lors de l’application bootstrap. Mais je ne pouvais pas voir quelque chose de bootstrap en passant par Ionic 2 tutorial. 

Toute aide est grandement appréciée.

angulartypescriptionic-frameworkionic2ionic3
32
VISHAL DAGA

Bootstrap () n’est pas utilisé dans Ionic2, utilisez seulement @App pour déclarer votre application . Vous devez toujours déclarer votre service dans votre composant @Page.

Créez votre service 

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;
  }
}

Puis utilisez-le dans votre @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()
  }
}
36
Raphael

RC Update:

Depuis Ionic2 RC, les services doivent maintenant être inclus dans le tableau providers à partir du @NgModule pour que ces services fonctionnent comme singletons (ce qui signifie que la même instance sera utilisée dans toute l'application).

@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 {}

Ancienne réponse (2.0.0-beta.8)

Juste au cas où cela pourrait aider d’autres développeurs Ionic2, avec la publication de 2.0.0-beta.8 , nous pouvons maintenant utiliser ionicBootstrap pour que nos services fonctionnent comme singletons, ce qui signifie que la même instance sera utilisée dans toute l'application.

Les changements nécessaires pour ce faire sont minimaux; vos services resteront les mêmes

/* 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;
  }
}

Mais au lieu de l’injecter sous la forme provider dans votre Component (ce qui entraînera la création d’une nouvelle instance de la service chaque fois que la component sera chargée)

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

Incluez-le simplement dans la ionicBootstrap de votre fichier app.ts, afin de vous assurer que la même instance du service sera utilisée dans toute l'application.

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

Guide de style angulaire:

Suivant Angular2 Style Guide

Fournissez des services à l'injecteur angulaire 2 tout en haut composant où ils seront partagés.

Pourquoi? L'injecteur angulaire 2 est hiérarchique.

Pourquoi? Lors de la fourniture du service à un composant de niveau supérieur, cela Cette instance est partagée et disponible pour tous les composants enfants de ce top composant de niveau.

Pourquoi? C'est idéal lorsqu'un service partage des méthodes ou un état.

Et 

Ça va marcher. Ce n'est tout simplement pas une pratique exemplaire. Le fournisseur de bootstrap Cette option est destinée à la configuration et à la substitution de la propre services préenregistrés, tels que son support de routage.

Donc, au lieu d’enregistrer le service dans la ionicBootstrap, nous devrions l’inscrire dans le composant le plus en haut de notre application (si nous voulons utiliser le même instance dans l’application entière}, comme ceci:

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

Recherchez Ionic Provider, dans les services ioniques au lieu des services angulaires, nous utilisons ionic Provider.

générer le fournisseur ionique 

ionic generate provider <provider name>

puis importez le fournisseur dans la page racine ou dans la page dans laquelle il doit être utilisé

et mettre dans le tableau de fournisseur

0
kuldeep kumar