0

将服务注入组件时，我看到了错误：

未定义一个或多个提供程序“CategoriesComponent”：[?、[object Object]、BrowserXhr、[object Object]、[object Object]、XHRBackend、[object Object]]。

请帮我解决这个问题。非常感谢

下面是我的代码：

类别.services.ts

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';


import { Category } from './index';
// import * as global from '../shared/global/globals';

@Injectable()
export class CategoryService {
    private _baseUrl: string = '/api/v1/category/list';

    constructor(private http: Http) {
        // this._baseUrl = global.BASE_URL;
    }

    getCategories(): Observable<Category[]>{
        return this.http.get(this._baseUrl)
            .map((res: Response) => {
                return res.json();
            })
            .catch(this.handleError);
    }

    private handleError(error: any) {
    var applicationError = error.headers.get('Application-Error');
    var serverError = error.json();
    var modelStateErrors: string = '';

    if (!serverError.type) {
      console.log(serverError);
      for (var key in serverError) {
        if (serverError[key])
          modelStateErrors += serverError[key] + '\n';
      }
    }

    modelStateErrors = modelStateErrors = '' ? null : modelStateErrors;

    return Observable.throw(applicationError || modelStateErrors || 'Server error');
  }
}

类别.component.ts

import { Component, OnInit } from '@angular/core';
import { HTTP_PROVIDERS } from '@angular/http';
import { Category, CategoryService } from './index';

@Component({
    // moduleId: module.id,
    selector: 'categories',
    templateUrl: 'views/category/categories-component',
    providers: [CategoryService, HTTP_PROVIDERS]
})
export class CategoriesComponent implements OnInit {
    categories: Category[];

    isCollapsed = false;

    constructor(private categoryService: CategoryService) {}

    ngOnInit() {
        this.categoryService.getCategories()
            .subscribe((categories: Category[]) => {
                this.categories = categories;
            }, 
            error => {
                console.log(error);
            });
        // console.log('=======');
    }

    toggle(){
        this.isCollapsed = !this.isCollapsed;
    }
}

navbar.component.ts

import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';
import { CategoriesComponent } from '../../category/index';

@Component({
    // moduleId: module.id,
    selector: 'navbar',
    templateUrl: 'views/navbar/navbar',
    directives: [ROUTER_DIRECTIVES, CategoriesComponent]
})
export class NavbarComponent {

}
4

1 回答 1

1

您不必在您的 providers 数组中提供服务.....发生的错误仅仅是由于这个......只需在您的 categories.component.ts 文件中更改它：-

提供者：[CategoryService，HTTP_PROVIDERS] 到===> 提供者：[HTTP_PROVIDERS]

如果您没有在您的应用程序组件或 main.ts 文件中提供它，这将有效...

您需要更改的第二件事是您的类别服务导入路径，如下所示：-

从'.path to category.service'导入{CategoryService}

然后它会正常工作:)

于 2016-07-28T04:51:17.837 回答