Angular class 中的 2 次服务注入，没有装饰器

Question

我正在尝试使用 Ionic 和 Angular2 构建一个简单的手机游戏。我对这两个都是新手。

我想在非组件class（Field）的构造函数中注入一个服务（FieldService）。注入不起作用并且 console.log（在 field.ts 中）总是 returns 未定义（其他一切正常）。

我阅读了无数关于它的文章，我觉得我理解它是如何工作的，但似乎无法在 2 天内解决我的问题。任何帮助将不胜感激。

结构

- app
  - app.module.ts
  - ...
- models
  - field.ts
- components
  - field.component.ts
- services
  - field.service.ts

app.module.ts

import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';
import { FieldComponent } from '../components/field.component';
import { FieldService } from '../services/field.service';

@NgModule({
  declarations: [
    MyApp,
    FieldComponent,
  ],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
  ],
  providers: [FieldService]
})
export class AppModule {}

field.component.ts

import { Component } from '@angular/core';
import { Field } from '../models/field';

@Component({
  selector: 'field',
  templateUrl: 'field.component.html',
  styles: []
})
export class FieldComponent {

  field: Field;

  constructor() {
      this.field = new Field(3, 3, 3);
  }
}

field.ts

import { Inject } from '@angular/core';
import { FieldService } from '../services/field.service';

export class Field implements OnInit {

    constructor(nb_lots: number, nb_layers: number, diamonds_to_add: number, fieldService: FieldService) {
        console.log(fieldService);
        ...
    }

}

field.Service.ts

import { Injectable } from '@angular/core';
import 'rxjs/Rx';

@Injectable()
export class FieldService {

  constructor() { }

}

Answer 1

注入不适用于任意类，它仅适用于 DI 创建的类。

如果您在 export class Field { 之上添加 @Injectable() 并将 Field 添加到提供程序并将其注入某处它可能会起作用。

另一点是，如果没有 @Inject(...) 装饰器（和匹配的提供程序），注入的构造函数参数不支持 number（和其他本机类型）。

Angular class 中的 2 次服务注入，没有装饰器

Angular 2 service injection in class with no decorator

code-injection

ionic-framework

angular