2016-07-28 107 views
0

当注射服务为组件,我看到的错误:角2提供商例外

One or more of providers "CategoriesComponent" were not defined: [?, [object Object], BrowserXhr, [object Object], [object Object], XHRBackend, [object Object]].

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

下面是我的代码:

category.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'); 
    } 
} 

categories.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 { 

} 

回答

1

你不必提供在你提供一个存储服务.....出现的错误是由于这只是...只是改变这个在您的categories.component.ts文件: -

providers: [CategoryService, HTTP_PROVIDERS] to===> providers: [HTTP_PROVIDERS]

这个工程如果u还没有提供它在您的应用程序组件或main.ts文件...

u需要改变的第二件事情是你categoryservice进口的如下路径: -

import { CategoryService } from '.path to category.service'

它会正常工作,然后:)

+0

我已删除类别riesService来自提供者,但它显示另一个错误:无法解析CategoriesComponent的所有参数:(?)。 – user3027246

+0

我明白了,问题是我从index.ts导入的CategoryService不允许在角度2 – user3027246

+0

如果你没有在你的app.component文件中提供它,那么不要将它从ur provider数组中移除...只是做我上面提到的第二件事 –