如何在 Ionic 2 中使用 angular 2 服务？

Question

我是 Ionic 2 的新手。我阅读了 angular 2 个文档，需要在 bootstrap 应用程序时注入该服务。但是在阅读 Ionic 2 教程时看不到任何 bootstrap 东西。

非常感谢任何帮助。

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 开始，现在这些服务应该包含在 @NgModule 的 providers 数组中，以使这些服务作为单例工作（意思是整个应用程序将使用相同的实例）。

@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 中（这将导致每次加载 component 时创建 service 的新实例)

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

Angular 风格指南：

正在关注 Angular2 Style Guide

Do provide services to the Angular 2 injector at the top-most component where they will be shared.

Why? The Angular 2 injector is hierarchical.

Why? When providing the service to a top level component, that instance is shared and available to all child components of that top level component.

Why? This is ideal when a service is sharing methods or state.

和

It will work. It's just not a best practice. The bootstrap provider option is intended for configuring and overriding Angular's own preregistered services, such as its routing support.

所以我们不必在 ionicBootstrap 中注册服务，而是必须在应用程序的最顶层组件中注册它（如果我们想在中使用 相同的实例整个应用程序)，像这样：

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

Answer 3

搜索 Ionic Provider，在 ionic 而不是 angular 服务中我们使用 ionic Provider，它们在 Ionic 中提供了依赖注入的概念。

生成离子提供者

ionic generate provider <provider name>

然后在根页面或者需要使用的页面导入provider

并放入提供者数组

如何在 Ionic 2 中使用 angular 2 服务？

How to use angular 2 service with Ionic 2?

angular

typescript

ionic-framework

ionic2

ionic3