Angular2 - 注入需要初始化参数的服务

Question

我有一项服务需要启动一些价值:

@Injectable()
export class MyService {
  private myVals: any;

  constructor(init : any) {
    this.myVals = init;
  }
}

和消费者:

@Component(...)
export class MyComponent {
  private svc: MyService;
  constructor(private svc : MyService) {
  }
}

那么有没有办法在"依赖注入期间"注入并将所需参数传递给MyService的构造函数？就像是:

constructor(private svc({ // init vales }) : MyService) {}

我知道我可以通过变量传递所有但有兴趣找到是否有办法从API执行此操作.

Answer 1

Angular团队在这里推荐了一种官方方式.它基本上允许您注入静态类型的配置类.

我已成功实现它,这里是所有相关代码:

1) app.config.ts

import { OpaqueToken } from "@angular/core";

export let APP_CONFIG = new OpaqueToken("app.config");

export interface IAppConfig {
    apiEndpoint: string;
}

export const AppConfig: IAppConfig = {    
    apiEndpoint: "http://localhost:15422/api/"    
};

2) app.module.ts

import { APP_CONFIG, AppConfig } from './app.config';

@NgModule({
    providers: [
        { provide: APP_CONFIG, useValue: AppConfig }
    ]
})

3) your.service.ts

import { APP_CONFIG, IAppConfig } from './app.config';

@Injectable()
export class YourService {

    constructor(@Inject(APP_CONFIG) private config: IAppConfig) {
             // You can use config.apiEndpoint now
    }   
}

现在,您可以在不使用字符串名称的情况下将配置注入到任何地方,并使用您的接口进行静态检查.

您当然可以进一步分离界面和常量,以便能够在生产和开发中提供不同的值,例如

Answer 2

上面的答案已被弃用，因为angular 4 现在您可以像这样使用它：

import { NgModule, APP_INITIALIZER } from '@angular/core';

@NgModule({
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: onAppInit1,
      multi: true,
      deps: [/* your dependencies */]
    },
    {
      provide: APP_INITIALIZER,
      useFactory: onAppInit2,
      multi: true,
      deps: [/* your dependencies */]
    }
  ]
})
export class AppModule { }

Answer 3

您可以使用@Inject，解释如下

为您服务：

import {Inject, Injectable} from '@angular/core';
    
@Injectable({
  providedIn: 'root'
})

export class NgService {
    constructor (
       @Inject('paramId') private paramId: string
    ) { }
}

然后，在您的组件中：

import { Component } from '@angular/core';

@Component({
  selector: 'app-demo',
  template: `
    <div"> </div>
  `,
   providers: [
    {provide: 'paramId', useValue: 'param-id'},
  ]
})

export class AppComponent {

  constructor(private ngService: NgService) { }

}