Angular 2 "No provider for String!"

原文 标签 angular angular2-services angular2-http angular2-di

我正在尝试在 Angular 2 中创建通用数据服务,但遇到了一个奇怪的错误。本质上,我正在创建一个 HTTP 服务,其方法包含 api url 的一部分,以便我可以在多种情况下使用它。例如,我想传入 'projects/' 并将其与 'api/' 连接以获取 'api/projects/',然后我可以在 http 调用中使用它。

我当前的dataService.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 的组件来自:
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();
    }
}

我确实在我的 app.module.ts 中将服务添加为提供程序。还有一点需要注意的是,我在这里展示的组件是一个名为 HomeComponent 的组件的子组件,它位于 AppComponent 中。

这就是 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 的字符串,但我就是不知道为什么。

任何帮助,将不胜感激!

最佳答案

你不能只是注入(inject)任意的东西。您尝试注入(inject)的任何内容都需要配置为可注入(inject)的。在大多数情况下,这意味着只需将类添加到 providers列表。在字符串的情况下,它不是那么简单。我们需要做几件事。

  • 首先我们需要创建一个 token 1
  • 然后使用该 token 配置要注入(inject)的字符串。
  • 然后使用相同的标记,@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 - 见 Dependency Injection Tokens

    更新

    现在,对于 Angular 4,我们应该使用 InjectionToken而不是 OpaqueToken

    关于 Angular 2 "No provider for String!",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39628768/

    相关文章:

    angular - 从 observable 数组中获取一个对象

    javascript - Angular ul、cdk-virtual-scroll-viewport 列表、键盘选择

    authentication - 带有 http 请求和可观察对象的 Angular2 auth 保护

    angularjs - Angular 2 http header 似乎已生成或发送不正确

    angular - 两次订阅 Angular 2 Http?

    angular - 你如何在 Angular 2 中发布一个 FormData 对象?

    javascript - 如何访问ng-template中的元素? ( Angular 5)

    Angular 4 - View 中未更新属性值

    javascript - 想要使用 Angular 2 中的服务通过子组件来控制父组件(菜单隐藏/显示)

    Angular 2 - 作为 NgModule 的服务不必声明所有提供者?