Угловой 2 " нет провайдера для строки!"

Я пытаюсь создать обобщенный сервис данных в Angular 2, и я сталкиваюсь со странной ошибкой. По сути, я создаю службу HTTP, методы которой принимают часть url api, чтобы я мог использовать ее для нескольких случаев. Например, я хотел бы передать в ' projects/ 'и соединить его с' api/', чтобы получить' api/projects/', который я мог бы затем использовать в вызовах http.

Мой текущий сервис данных.ts: 

import { Injectable } from '@angular/core';
import { Http, Response, Headers } from '@angular/http';
import 'rxjs/add/operator/map'
import { Observable } from 'rxjs/Observable';
import { Configuration } from '../app.constants';

@Injectable()
export class DataService {

    private actionUrl: string;
    private headers: Headers;

    constructor(private _http: Http, private _configuration: Configuration, public action: string) {

    this.actionUrl = _configuration.ApiUrl

    this.headers = new Headers();
    this.headers.append('Content-Type', 'application/json');
    this.headers.append('Accept', 'application/json');
    }

    public GetAll (action: string): Observable<any> {
        return this._http.get(this.actionUrl + action).map((response: Response) => <any>response.json());
    }

    public GetSingle (action: string, id: number): Observable<Response> {
        return this._http.get(this.actionUrl + action + id).map(res => res.json());
    }

    public Add (action: string, itemToAdd: any): Observable<Response> {
        var toAdd = JSON.stringify(itemToAdd);

        return this._http.post(this.actionUrl + action, toAdd, { headers: this.headers }).map(res => res.json());
    }

    public Update (action: string, id: number, itemToUpdate: any): Observable<Response> {
        return this._http
        .put(this.actionUrl + id, JSON.stringify(itemToUpdate), { headers: this.headers })
        .map(res => res.json());
    }

    public Delete (action: string, id: number): Observable<Response> {
        return this._http.delete(this.actionUrl + id);
    }
}

Компонент, который я пытаюсь вызвать GetAll с параметром 'projects' откуда: 

import { Component, OnInit } from '@angular/core';
import { DataService } from '../services/dataService';

@Component({
    selector: 'project-detail',
    templateUrl: 'app/project/project-detail.component.html'
})
export class ProjectDetailComponent implements OnInit{
    projects: Object[];

    constructor(private _dataService: DataService) {}

    getProjects(): void {
        this._dataService.GetAll('projects').subscribe(projects => this.projects = projects);
    }
    ngOnInit(): void {
        this.getProjects();
    }
}

У меня есть услуга, добавленная в качестве поставщика в моем приложении.модуль.тс. Еще одно замечание состоит в том, что компонент, который я показываю здесь, является дочерним компонентом компонента под названием HomeComponent, который находится в Appcommonent.

Вот как выглядит HomeComponent: 

import { Component, OnInit } from '@angular/core';
import { ProjectDetailComponent } from '../project/project-detail.component';


@Component({
    selector: 'home',
    templateUrl: '<project-detail></project-detail>'
})

export class HomeComponent {}

Ошибка: 

EXCEPTION: Uncaught (in promise): Error: Error in      app/home/home.component.html:2:0 caused by: No provider for String!
Я знаю, что он жалуется на строку, которую я передаю в GetCall, но я просто не знаю, почему.

Любая помощь будет оценена!

1 2
angular2-http angular2-services

1 ответ:

Вы не можете просто вводить произвольные вещи. Все, что вы пытаетесь ввести, должно быть настроено на инъекцию. В большинстве случаев это означает просто добавление класса в список providers. В случае со струной все не так просто. Нам нужно кое-что сделать.

  1. Сначала нам нужно создать токен1
  2. затем настройте строку для ввода, используя этот маркер.
  3. затем с тем же знаком, @Inject его в цель.
import { OpaqueToken } from '@angular/core';

// 1. Create token
export const ACTION = new OpaqueToken('app.action');

// 2. Configure the `providers` (Maybe in the AppModule)
providers: [
  { provide: ACTION, useValue: 'the value you want'
]

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

export class DataService {
  // 3. Injection target 
  constructor(@Inject(ACTION) action: string) {}
}

1 - См. Маркеры Внедрения Зависимостей

Обновление

Теперь, с угловой 4, мы должны использовать InjectionToken, а не OpaqueToken

5