Question

在ASP MVC核心中只在角度2中创建一个应用程序。制作了一个组件，模块和服务。但是在调用时，它似乎引发了以下错误：

  Error: Error in ./BillingComponent class BillingComponent_Host - inline template:0:0 caused by: No provider for BillingService

billing.component.ts文件如下：

import { Component, OnInit } from '@angular/core';

import { BillingPackage } from './BillingPackage';
import { BillingService } from './Billing.Service';

@Component({
    templateUrl: 'app/Billing/billing.component.html'
})
export class BillingComponent /* implements OnInit*/ {
    pageTitle: string = 'Billing Options';
    listFilter: string;
    errorMessage: string;

    packages: BillingPackage[];

    constructor(private _billingService: BillingService) {

    }


    ngOnInit(): void {
        debugger;
        this._billingService.getPackages()
            .subscribe(billing => this.packages = billing,
            error => this.errorMessage = <any>error);
    }

}

Billing.service.ts如下：

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';

import { BillingPackage } from './BillingPackage';

@Injectable()
export class BillingService {
    //private _companyUrl = 'api/companies/companies.json';
    private _billingUrl = 'api/BillingPackage.json';

    constructor(private _http: Http) { }

    getPackages(): Observable<BillingPackage[]> {
        return this._http.get(this._billingUrl)
            .map((response: Response) => <BillingPackage[]>response.json())
            .do(data => console.log('All: ' + JSON.stringify(data)))
            .catch(this.handleError);
    }

    getPackage(id: string): Observable<BillingPackage> {
        return this.getPackages()
            .map((billing: BillingPackage[]) => billing.find(p => p.Id == id));
    }

    private handleError(error: Response) {

        console.error(error);
        return Observable.throw(error.json().error || 'Server error');
    }
}

和Billing.module.ts如下：

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';

import { BillingComponent } from './billing.component';
import { BillingService } from './billing.service';
import { SharedModule } from '../shared/shared.module';

@NgModule({
    imports: [
        SharedModule,
        RouterModule.forChild([
            { path: 'billpackages', component: BillingComponent },
        ])
    ],
    declarations: [
        BillingComponent
    ],
    providers: [
        BillingService,
    ]
})
export class BillingModule { }

Billing.component.html文件如下：

<div class="row" *ngIf="packages && packages.length">


    <div class="col-xs-12 col-sm-6 col-md-4" *ngFor="let package of packages">

        <div class='panel panel-info'>
            <div class='panel-heading'>
                {{package.Name}}
            </div>


            <div class='panel-body'>

                <div class='has-error' *ngIf='errorMessage'>{{errorMessage}}</div>

                <div class="row">
                    <h2> <span class="label label-success"> {{package.AllowedUsersCount}}</span> Users</h2> 
                </div>

                <div class="row">
                    <h2> <span class="label label-info"> {{package.AllowedItemCount}}</span> Products</h2>
                </div>

                <div class="row">
                    <h2> <span class="label label-warning"> {{package.AllowedTransactions}}</span> Transactions</h2>
                </div>

                <div class="row">
                    <h2> <span class="label label-danger"> {{package.AllowedStoreCount}}</span> Stores</h2>
                </div>

                <div class="row">
                    <h2> For <span class="label label-primary"> {{package.MonthlyCharges}}</span></h2>
                </div>

            </div>
        </div>

    </div>

</div>

任何帮助表示赞赏..

Answer 1

您必须添加提供商：[BillingService] ：

@Component({
   selector: 'billing',
   templateUrl: 'app/Billing/billing.component.html',
   providers: [ BillingService]    
})

希望它对你有用。

Answer 2

仔细检查每个目录路径，错误显示为：inline template:0:0，如果可能，请提供html模板代码。

Billing.module.ts的{{1}}路线：

BillingComponent

应该是：

{ path: 'billpackages', component: BillingComponent }

如果为父组件分配路径

角度2错误没有“BillingService”的提供者

2 个答案: