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) {
  }
}

有没有办法在＆＃34;期间注入并将所需参数传递给MyService的构造函数＆＃34;依赖注入？类似的东西：

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

我知道我可以通过变量传递所有人，但有兴趣找到是否可以通过API执行此操作。

Answer 1

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

我已经成功实施了它，这里是所有相关代码：

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 { }

更多info refer here

Answer 3

你可以使用@Inject，解释here

为您服务：

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) { }

}

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

3 个答案: