服务未注入Angular2

时间:2016-10-27 11:23:42

标签: javascript angular

我正在尝试将以下服务注入组件:

public void repair(Item<?> item){...}

然后我按如下方式注入:

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

@Injectable()
export class ColorService {       
  private colorPalettes = [

        [
            'rgba(36, 123, 160, 1)',
            'rgba(112, 193, 179, 1)',
            'rgba(178, 219, 191, 1)',
            'rgba(243, 255, 189, 1)',
            'rgba(255, 22, 84, 1)'
        ]
  ]
  constructor() { // some calculations
  }
}

然而this.colors是未定义的。我还将ColorService设置为app.module中的提供程序以便注入它。

3 个答案:

答案 0 :(得分:0)

要在组件中使用服务,您必须执行以下操作:

import { Component } from '@angular/core';
import { ColorService } from '../colors.service';

@Component({
  moduleId: module.id,
  selector: 'search-form',
  templateUrl: 'search-form.component.html',
  styleUrls: [ 'search-form.component.css']
})

export class SearchFormComponent {

    constructor(private colors: ColorService ) {
        console.log(this.colors);
    }
}

答案 1 :(得分:0)

要添加@ ranakrunal9的答案,请确保在使用它的模块中将其标记为提供者(例如,您的应用模块):

import { NgModule }      from '@angular/core';
import { HttpModule } from '@angular/http';
import { BrowserModule } from '@angular/platform-browser';
import './rxjs-operators';

import { AppComponent }  from './app.component';
import { NavModule } from './shared/nav/nav.module';
import { ThisService } from './shared/this.service';
import { ThatService } from './shared/that.service';

@NgModule({
  imports:      [ BrowserModule, HttpModule, NavModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ],
  providers:    [ ThisService, ThatService ] // this is the important part
})

export class AppModule { }

答案 2 :(得分:0)

您的PDFrow = writePDF.rows(sorte,fields,530,10,530) TypeError: unbound method rows() must be called with writePDF instance as first argument (got Result instance instead) 元素应该具有属性search-form(因为colors),您可以在其中定义ColorService。

@Input()

并且在视图关联的组件中,您还应该注入ColorService并在构造函数中定义<search-form [color]="myColorService" />

myColorService

希望这有帮助。