2017-08-28 110 views
0

我想创建一个角的应用程序,并试图在一个组件来使用服务,角4无提供服务

我的服务:DetailsTabAPiService

@Injectable() 
export class DetailsTabAPiService { 

    constructor(private _http: Http) { } 

    private _url: string = AppSettings.URI + "/api/maintenance/Countries"; 

    fetchCountry(): Observable<ICountries> { 
     console.log('contry 3'); 

     return this._http.get(this._url) 
      .map((resp: Response) => resp.json()) 
      .catch(this.handleErrors); 
    } 


    handleErrors(error: any, caught: Observable<any[]>): Observable<ICountries[]> { 
     console.error(error); 
     return Observable.throw(error.json().error || 'Server error') as Observable<ICountries[]>; 
    } 

} 

我的控制器:DetailTabsComponent

import { MaintPlantApiService } from '../../services/plants-api.service'; 
import { MaintProgramApiService } from '../../services/programs-api.service'; 
import { DetailsTabAPiService } from '../../services/detailstab-api.service'; 
import { IPlants } from '../../models/plants.model'; 
import { ICountries } from '../../models/Countries.model'; 
@Component({ 
    selector: 'ppa-detailtabs', 
    templateUrl: './detailtabs.Component.html', 
    providers: [MaintProgramApiService, MaintPlantApiService, DetailsTabAPiService], 
    styleUrls: ['./tabs.css'], 

}) 

export class DetailTabsComponent { 

    @Input() myplantid: number = 0; 
    plant: IPlants; 
    country: ICountries; 
    isSuccess: boolean = false; 
    _plantId: number = 0; 
    public allowCustom: boolean = true; 
    public allCountries = []; 
    constructor(private zone: NgZone, private _router: Router, private DetailsApiServ: DetailsTabAPiService, private ProgramsApiSvrc: MaintProgramApiService, 
     private plantApiSrv: MaintPlantApiService, private activatedRoute: ActivatedRoute) { 

    } 

    ngOnInit() { 
     console.log('contry 1'); 
     this.fetchCountryList(); 

     this.activatedRoute.params.subscribe((params: Params) => { 
      //alert('params received: ' + params['Id']); 
      let plantId = params['Id']; 
      this.plantApiSrv.getDataById(plantId) 
       .subscribe((callbackData) => { 
        this.plant = callbackData; 
       }); 
     }); 

    } 
    ModifyPlantDetails(_data: IPlants): void { 

     this.plantApiSrv.update(_data.Id, _data) 
      //.subscribe(result => this.plant = result, error => this.isSuccess = false); 
      .subscribe(result => { 
      this.plant = result; this.isSuccess = true; 
      }, 
      error => { this.isSuccess = false }); 

    } 


    fetchCountryList(): void { 
     console.log('contry 2'); 

     this.DetailsApiServ.fetchCountry() 
      .subscribe(result => { 
       this.country = result; 
       console.log(this.country); 
      }, 
      error => { this.isSuccess = false }); 
    } 
} 

As per the documentation, I am supped to put the service on the provider list, which I have done, but still while using it gives me the error. 

我应该从serv获取国家列表冰。所以我已经导入了服务,然后放入构造函数,然后尝试使用它。

但是,尽管这样做根据的一切文档,这是 给我的错误“无提供服务”即使我 包含在我的供应商的服务。

根据我的理解,这些应该是让这件事情起作用的步骤。但不知何故,它不工作。请帮忙。我相信我在这里失去了一些东西。但我不知道是什么。

+0

您是否尝试过在你的应用程序主模块将提供一个存储在这些服务 - ** ** app.module.ts? –

+0

控制台中显示的错误是什么?你能用那个更新这个问题吗? –

回答

1

确保导入{ ServiceName } from " ./WhereverServiceIs" ;

,并确保你也有你的Providers Array在正确的地方。

1
  1. 确保添加了所有需要的导入 - 通常,IDE应该自动处理它。
  2. 请仔细检查所有服务路径 - 如果IDE没有自动执行,请注意点。
  3. 尝试将您的服务推送到app.module.ts,而不是将其添加到组件提供商,确切地说在这里:providers: [AddYourServicesHere]
0

刚才在导入时遇到与绝对路径相同的错误。应该改变

import { ExcelExportLogService } from 'app/admin/excel-export-logs/excel-export-log.service'; 

import { ExcelExportLogService } from './excel-export-log.service'; 

误导性的错误消息