Angular 4 没有服务提供者

标签 angular angular2-services

我正在尝试创建一个 Angular 应用程序,并尝试在组件中使用服务,

我的服务: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[]>;
    }

}

我的 Controller :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. 

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

But despite doing everything according to the documentation, it's giving me the error "no Provider for Service" even though I am included the service in my providers.

根据我的理解,这些应该是让这个东西工作的步骤。但不知何故它不起作用。请帮忙。我确定我在这里遗漏了一些东西。但我不确定是什么。

最佳答案

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

关于Angular 4 没有服务提供者,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45912743/

相关文章:

angular - 不带参数获取当前路由

angular-cli 库创建辅助入口点

angular - 延迟导航到下一页

angular - 当 Observable/订阅更改属性时 ngOnChanges 不触发

angular - 如何使用 ngx-bootstrap 创建通用通知,如 toastr 通知

angular - SOAP - WSDL 请求 angular2/4 框架

html - Angular Material ng-tns 类更改了我表中元素的边距,可以使用 CSS 更改边距但随后应用了 ng-tns 的另一个变体吗?

javascript - 下载文件时Angular忽略离开页面事件

jquery - 如何在不使用 Angular CLI 的情况下在索引页中添加 bootstrap 和 JQuery 引用

angular - 组件可注入(inject)?