3

私は初心者で、Ionic2（Angular2で書かれています）で遊んでいます。自分のサービスで依存性注入の問題を解決するために助けが必要です。

これが私のコードです

import {Injectable} from 'angular2/core';
import {Http} from 'angular2/http';

@Injectable()
export class Api {
    constructor(public http: Http) {
        console.log('api', http); // http is always undefined.
    }
}


api = new Api();

他の場合、それは機能します。

import {Component, View} from 'angular2/angular2';
import {IONIC_DIRECTIVES} from 'ionic/ionic';
import {Http, Headers} from 'angular2/http';
import {Storage, LocalStorage} from 'ionic/ionic';

@Component({
    selector: 'auth-login'
})

@View({
  templateUrl: 'app/auth_login/auth_login.html',
  directives: [IONIC_DIRECTIVES]
})

export class AuthLogin {
  constructor(http: Http) {
    console.log('login', http); // it works
  }
}

皆さん、ありがとうございました。

4

3 に答える 3

3

Ionic でのサービスの注入は、@App アノテーションなどでプロバイダーの定義を通過します。

http://jbavari.github.io/blog/2015/10/19/angular-2-injectables/

@App({
  templateUrl: 'app/app.html',
  providers: [DataService]
  /* 
    Here we're saying, please include an instance of 
    DataService for all my children components,
    in this case being sessions, speakers, 
    and session detail.
  */
})
class ConferenceApp {
  constructor(platform: Platform, data: DataService) {
    data.retrieveData();
  }
}

これにより、サービスが適切にインスタンス化され、注入できるようになります

于 2016-02-03T18:33:49.677 に答える
1

サービスを使用する場所でサービスを宣言する必要があります

@Component({
    selector: 'auth-login',
    providers: [Api]
})
于 2016-01-14T14:45:19.470 に答える
0

Ionic 2 と Angular 2 で同様の問題が発生しました。app.ts と login.ts と user-data.ts (api.ts のように) があります。

app.ts <- login.ts <- user-data.ts

login.ts と app.ts に UserData クラスをプロバイダーとして配置すると、すべてが機能し始めました。

app.tsは次のようになります。

@Component({
  templateUrl: 'build/app.html',
  directives: [ROUTER_DIRECTIVES], 
  providers: [
    { 
      provide: TranslateLoader, 
      useFactory: (http: Http) => new TranslateStaticLoader(http, 'assets/i18n', '.json'),
      deps: [Http]
    },
    TranslateService,
    ROUTER_PROVIDERS,
    UserData
  ]
})

login.tsはこんな感じ

import {Page, NavController} from 'ionic-angular';
import {UserData} from '../../providers/user-data-provider/user-data';

@Page({
  templateUrl: 'build/pages/login/login.html',
  providers: [UserData]
})
export class LoginPage {
 ...
}

そしてuser-data.tsはこのようなものです

import {Injectable} from '@angular/core';
import {Storage, LocalStorage, Events} from 'ionic-angular';


@Injectable()
export class UserData { 
   ...
}

私は使っている：

C:\ionic2\myapp>npm list -depth=0

+-- @angular/common@2.0.0-rc.3
+-- @angular/compiler@2.0.0-rc.3
+-- @angular/core@2.0.0-rc.3
+-- @angular/forms@0.1.1
+-- @angular/http@2.0.0-rc.3
+-- @angular/platform-browser@2.0.0-rc.3
+-- @angular/platform-browser-dynamic@2.0.0-rc.3
+-- @angular/router@2.0.0-rc.2
+-- cordova@6.3.0
+-- del@2.2.0
+-- es6-shim@0.35.1
+-- gulp@3.9.1
+-- gulp-watch@4.3.5
+-- ionic-angular@2.0.0-beta.10
+-- ionic-gulp-browserify-typescript@2.0.0
+-- ionic-gulp-fonts-copy@1.0.0
+-- ionic-gulp-html-copy@1.0.0
+-- ionic-gulp-sass-build@1.0.0
+-- ionic-gulp-scripts-copy@2.0.1
+-- ionic-gulp-tslint@1.1.0
+-- ionic-native@1.3.2
+-- ionicons@3.0.0
+-- ng2-bootstrap@1.0.17
+-- ng2-translate@2.2.2
+-- reflect-metadata@0.1.3
+-- run-sequence@1.1.5
+-- rxjs@5.0.0-beta.6
+-- tslint-ionic-rules@0.0.3
`-- zone.js@0.6.12

それが役に立てば幸い

于 2016-07-29T02:51:36.590 に答える