32

私はIonic 2を初めて使用します。Angular 2のドキュメントを読みました。そのサービスは、アプリケーションのブートストラップ中に注入する必要があります。しかし、Ionic 2 のチュートリアルを行っている間は、ブートストラップが見られませんでした。

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

4

3 に答える 3

36

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()
  }
}
于 2016-01-13T08:49:28.903 に答える
24

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)

2.0.0-beta.8Ionic2のリリースにより、これが他の開発者に役立つ場合に備えて、アプリケーション全体で同じインスタンスが使用されることを意味するようにサービスを機能させるために使用できます。ionicBootstrapsingletons

これを行うために必要な変更は最小限です。あなたのサービスは変わりません

/* 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{ 
  // ...
}
于 2016-06-26T07:08:09.667 に答える