Angular 2 Typescript - 无法解析TooltipService

时间:2016-07-06 15:23:54

标签: javascript dependency-injection typescript angular

我有这个代码,它将一个http.get请求的服务注入一个组件。

组件呈现正常但我将服务注入组件后出错。

得到错误;

EXCEPTION:无法解析TooltipService的所有参数:(?)。

我已经包含了引导程序,因为我认为它是DI问题,

import { Component, Input } from '@angular/core';
import { TooltipService } from '../../services/tooltip/tooltip.service';

@Component({
    ..,
    ..,
    providers: [TooltipService]
})

export class TooltipComponent implements OnInit {
    @Input() explaination: boolean;
    @Input() nodeId: number;
    @Input() questionId: number;

    constructor(public tooltipService: TooltipComponent) {}

    ngOnInit() {
        if(this.explaination) {
            this.tooltipService.getExplaination(this.nodeId, this.questionId)
                .then(response => console.log(response));
        }
    }
}

-

import { Http } from '@angular/http';
import { Injectable } from '@angular/core';
import 'rxjs/add/operator/toPromise';

@Injectable()

export class TooltipService {
    constructor(public http: HTTP) {}

    getExplaination(private nodeId: number, private questionId: number) {

        let url = `someUrl/`
                    + questionId + `/` + nodeId;

        return this.http.get(url)
            .toPromise()
            .then(response => response.json())
            .catch(this.handleError);
    }

}

-

import { bootstrap } from '@angular/platform-browser-dynamic';
import { disableDeprecatedForms, provideForms } from '@angular/forms';
import { HTTP_PROVIDERS } from '@angular/http';

import {AppComponent} from '../app/components/app/app.component';

bootstrap(AppComponent, [
        HTTP_PROVIDERS,
        disableDeprecatedForms(),
        provideForms()
    ])
    .catch((err: any) => console.error(err));

1 个答案:

答案 0 :(得分:3)

您的代码中有2个拼写错误。

它是Http,而不是HTTP

export class TooltipService {
    constructor(public http: Http) {}

您可能想要注入服务,而不是组件:

export class TooltipComponent implements OnInit {
    @Input() explaination: boolean;
    @Input() nodeId: number;
    @Input() questionId: number;

    constructor(public tooltipService: TooltipService) {}