Angular 2 Typescript - 无法解析 TooltipService 的所有参数答案

【问题标题】：Angular 2 Typescript - Can't resolve all parameters for TooltipServiceAngular 2 Typescript - 无法解析 TooltipService 的所有参数
【发布时间】：2016-11-08 17:25:02
【问题描述】：

我有这段代码将一个服务注入到一个组件中，该服务发出一个 http.get 请求。

组件渲染良好，但将服务注入组件后出现错误。

并得到错误；

例外：无法解析 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));

【问题讨论】：

标签： javascript dependency-injection typescript angular

【解决方案1】：

您的代码中有 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) {}

【讨论】：

碰巧最好！ :)