2017-08-28 114 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'; 

誤導性的錯誤消息