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

钢筋混凝土更新：

从 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;
  }
}

但不是将它作为 a 注入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 风格指南

务必在将共享它们的最顶层组件为 Angular 2 注入器提供服务。

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

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

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

和

它会起作用的。这不是最佳实践。引导提供程序选项旨在配置和覆盖 Angular 自己的预注册服务，例如它的路由支持。

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

@Component({
  templateUrl: 'build/app.html',
  directives: [...],
  providers: [..., DataService]
})
class MyApp{ 
  // ...
}
于 2016-06-26T07:08:09.667 回答
0

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

生成离子提供者

ionic generate provider <provider name>

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

并放入提供者数组

于 2018-09-09T11:54:33.523 回答