Angular 2 将一个类注入到服务中

Posted 2023-02-19

【中文标题】Angular 2 将一个类注入到服务中

【英文标题】：Angular 2 inject a class into a service

【发布时间】：2017-05-11 02:45:25

【问题描述】：

我想用我的配置参数在我的服务中注入一个类。

我做了下面的示例代码，但它不起作用：

import  Config  from '../app.constants';

console.log(Config); // here i can access to my properties of config

@Injectable()
export class MyService 


  protected config: Config;

  constructor(protected _http: Http, @Inject(Config) _configuration: Config) 
    console.log(this.config); // undefined
    console.log(_configuration); // undefined

我想我没有理解 Angular 2 的作用域和注入过程。 如何在我的服务 MyService 中访问我的类配置？

编辑：

这是我的模块

import  NgModule       from '@angular/core';

import  MyService  from './my.service';
import  Config  from '../app.constants';


@NgModule(
  imports: [
  ],
  declarations: [
    MyService
  ],
  exports: [
    MyService
  ],
  providers: [
    MyService,
    Config
  ]
)
export default class MyModule 

这是我的配置：

import  Injectable  from '@angular/core';

@Injectable()
export class Config 
  public Port: number = 1234;
  public Server: string = "http://my-server.com";

服务MyService没有被直接调用，我是这样扩展的：

@Injectable() 导出类 TestService 扩展 MyService ...

这样导入的：

import  TestService  from '../service/test.service';
//some modules are from ng2-admin, we can ignore them
@NgModule(
  imports: [
    CommonModule,
    NgaModule,
    TestRouting
  ],
  declarations: [
    TestComponent,
    HoverTable
  ],
  exports: [
    TestComponent,
    HoverTable
  ],
  providers: [
    TestService
  ]
)
export default class TestModule 

最后是我的组件

@Component(
  selector: 'test-list',
  template: require('./test.html')
)
export class TestComponent 


   constructor(protected service: TestService) 
      //console.log(service);

   

【问题讨论】：

你试过console.log( this. _configuration )吗？

我没有影响到我的类中的 _configuration，它只是我的构造函数的一个本地属性。

@estus 我用大量数据编辑了我的问题

【参考方案1】：

export class MyService 

  protected config: Config;

  constructor(protected _http: Http, @Inject(Config) _configuration: Config) 
    console.log(this.config); // undefined
    console.log(_configuration); // undefined
  

您永远不会在任何地方初始化配置字段，因此它是未定义的。你只需要

export class MyService 

  protected config: Config;

  constructor(protected _http: Http, _configuration: Config) 
    this.config = _configuration;
  

或者干脆

export class MyService 

  protected config: Config;

  constructor(protected _http: Http, protected config: Config) 
  

由于 MyService 是一项服务，因此必须将其添加到模块的提供者中，而不是添加到声明中（用于组件、管道和指令）：

@NgModule(
  providers: [
    MuleService,
    Config,
    MyService
  ]
)

如果您只想将 TestService 用作服务，而不是 MyService，请确保 TestService 有一个构造函数，该构造函数也接受所有必须注入的参数：

constructor(http: Http, config: Config) 
  super(http, config);

【讨论】：

我同意我的参数配置从未设置，一开始我像你一样填写它，但正如下面一行所说，甚至 console.log(_configuration);未定义，因此问题不在我的构造函数之外。对于提供商，我也按照您所说的那样定义了它，但是即使这样也无法访问我的配置。我会按照你说的现在尝试编辑 TestService！

如果还是不行，就提供plunkr重现问题。

我无法解析 TestService 的所有参数，即使我将 Config 和 MyService 添加为我的测试模块的声明和导入。如果明天没有人知道，我会尝试做一个plunker。谢谢！

嗨@JB Nizet，感谢您的回答。现在好了。我做了一个样品 plunker，但我没有想到我们让它工作，但我仍然把它固定在我身边！谢谢

对于那些需要灵感的人来说，这样做是这样的plnkr.co/edit/kciq3EAdjUYSH3m66ScT