如何将angular 2服务与Ionic 2配合使用？

我是离子2的新手。 我在angular 2文档中读到，在引导应用程序时需要注入服务。但在学习离子2教程时，看不到任何引导程序

---

非常感谢您的帮助。

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

---

RC更新：

从Ionic2 RC开始，现在服务应该包含在

@NgModule

的

提供者

数组中，以使这些服务作为单例工作（这意味着整个应用程序将使用相同的实例）

而不是将其作为

提供者注入
组件中（这将导致每次加载
组件时创建
服务的新实例）

只需将其包含在
app.ts
文件的
ionicBootstrap
中，即可确保在整个应用程序中使用相同的服务实例。

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


角度样式指南：

跟随

务必在最顶部为角2喷油器提供服务
它们将在其中共享的组件

为什么?？角2喷油器是分层的

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

为什么?？当服务共享方法或状态时，这非常理想

及

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

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

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

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

生成离子提供者

ionic generate provider <provider name>

离子生成提供程序

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

将服务添加到你的
@App
提供者数组中，而不是将服务添加到所述
@页面的提供者数组中，你可以实现与引导类似的功能。是的，但更好的做法是指定你使用服务的位置。一个服务必须是一个单例，整个应用才能使用共享诸如缓存之类的公共数据，这意味着它必须在顶级组件中定义。如果我们谈论的是类似模型的服务，那就是。另一方面，其他人，如http，则不需要相互了解。在完成这些步骤后，是否有任何关于请求完成后如何访问
@Page
中使用的“数据”变量的线索？在需要的地方注入服务不是更好的做法，这会创建一个单独的实例，这通常不是服务的期望行为。一般来说，您只需要在@App中注入一个实例。在您的示例中，两个不同的页面都有各自的关联实例，因此在第1页中调用retrieveData（）和在第2页中尝试getData（）都不会返回刚刚检索到的数据。这为我解决了这个问题，非常感谢。想知道文档在哪里，很难找到关于PromisesWell的模糊错误，Ionic团队仍在编写文档，但由于Ionic2构建在Angular2之上，您可以在和其他Angular文档相关的页面中找到此类内容。为了了解注入器的工作原理（这使我能够理解这个主题并写出这个答案），你可以看看。嗨。我试图通过@sebafereras来遵循这个例子。看起来该服务被选中了，但是，每当我包含该服务时，生成的屏幕都是空白的。知道为什么吗？该服务驻留在src/providers/global-alerts.ts中
ionicBootstrap(MyApp, [DataService], {});

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

ionic generate provider <provider name>