Question

我是Ionic 2的新手。我在angular 2 docs中读到，需要在引导应用程序时注入服务。但是在通过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的{{1}}数组中，以使这些服务像单例一样工作（意味着相同的实例将会用于整个应用程序）。

@NgModule

旧答案（2.0.0-beta.8）

如果这可以帮助其他@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使我们的服务工作为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的新实例）< / p>

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

角度风格指南：

关注Angular2 Style Guide

最顶层的Angular 2进样器提供服务   它们将被共享的组件。

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

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

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

并且

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

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

ionicBootstrap

Answer 3

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

生成离子提供者

ionic generate provider <provider name>

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

并放入提供程序数组

如何在Ionic 2中使用角度2服务？

3 个答案: