web-dev-qa-db-ja.com

angular 2 service with Ionic 2？

Ionic 2を初めて使用します。angular 2ドキュメントを読みました。bootstrapアプリケーションの実行中にサービスを注入する必要があります。しかし、bootstrap 2チュートリアルを実行している間、Ionicのことを見ることができませんでした。

どんな助けも大歓迎です。

angulartypescriptionic-frameworkionic2ionic3
32
VISHAL DAGA

Ionic2ではBootstrap（）を使用せず、アプリを宣言するために@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()
  }
}
36
Raphael

RCアップデート：

Ionic2 RCの時点で、サービスは@NgModuleのproviders配列に含まれ、これらのサービスがsingletonsとして機能するようになります（同じインスタンスがアプリケーション全体で使用されることを意味します） 。

@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）

2.0.0-beta.8 のリリースにより、これが他のIonic2開発者を助けることができる場合に備えて、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()
  }
}

app.tsファイルのionicBootstrapに含めるだけで、サービスの同じインスタンスがアプリケーション全体で使用されることを保証するために

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

角度スタイルガイド：

次の Angular2スタイルガイド

サービスを共有する最上位コンポーネントのAngular 2インジェクターにサービスを提供してください。

どうして？ Angular 2インジェクターは階層的です。

どうして？ 最上位レベルのコンポーネントにサービスを提供する場合、そのインスタンスは共有され、最上位コンポーネントのすべての子コンポーネントで利用可能。

どうして？これは、サービスがメソッドまたは状態を共有している場合に理想的です。

そして

それが動作します。ベストプラクティスではありません。 bootstrap=プロバイダーオプションは、ルーティングサポートなど、Angularの事前登録サービスを設定およびオーバーライドすることを目的としています。

したがって、ionicBootstrapにサービスを登録する代わりに、アプリケーションの最上位コンポーネントに登録する必要があります（アプリケーション全体で同じインスタンスを使用する場合） 、 このような：

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

Ionic Provider、ionicではなくangular使用するサービスionicプロバイダ、Ionicでの依存性注入の概念を提供します。

ionicプロバイダーを生成する

ionic generate provider <provider name>

そして、プロバイダーをルートページまたは使用する必要があるページにインポートします。

プロバイダー配列に入れます

0
kuldeep kumar