如何使用Ionic 2的角度2服务？

Question

我是Ionic 2的新手。我在有角度的2文档中读到，需要在引导应用程序时注入服务。但是在通过Ionic 2教程时看不到任何引导的东西。

任何帮助都非常感谢。

Answer 1

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

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-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], {});

---

角度风格指南：

关注Angular2 Style Guide

确保Angular 2进样器在最顶级组件处提供服务，以便共享它们。

为什么？ Angular 2注射器是分层的。

为什么？在向顶级组件提供服务时，该实例是共享的，并且可供该顶级组件的所有子组件使用。

为什么？当服务共享方法或状态时，这是理想的选择。

和

它会工作。这不是最好的做法。引导程序提供程序选项用于配置和覆盖Angular自己的预注册服务，例如其路由支持。

因此，我们不必在ionicBootstrap中注册服务，而是必须在我们应用程序的最顶层组件中注册它（如果我们想在整个应用程序中使用相同的实例），如下所示：

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

Answer 3

搜索离子提供器，在离子而非角度服务中我们使用离子提供器，它们提供了Ionic中依赖注入的概念。

生成离子提供者

ionic generate provider <provider name>

然后在根页面或需要使用它的页面中导入提供程序

并放入提供者数组