Question

我正在尝试使用visual studio 2015应用程序中的typescript构建一个角度2应用程序。我正在使用角度释放候选人1。

我创建了一个risk.service组件，它将为我的视图提供数据。但是，在运行应用程序时，我在浏览器的控制台中收到以下错误消息。

EXCEPTION：在RiskService上找不到指令注释。

我的文件夹结构

risk.service.ts

import { Injectable } from '@angular/core';
import { IRisk } from './risk';
import { Component } from '@angular/core';

@Injectable()
export class RiskService {

    getRisks(): IRisk[] {
        return [

            {
                "riskId": 1,
                "reference": "HISC9308336",
                "insuredName": "SA 84161",
                "inceptionDate": "March 19, 2016",
                "riskType": "Quote",
                "status": "Indication",
                "grossPremium": 100,
                "allocatedTo": "Broker User",
                "allocatedCompany": "Broker"
            },
            {
                "riskId": 2,
                "reference": "HISC9308340",
                "insuredName": "Upper Loi",
                "inceptionDate": "April 25, 2016",
                "riskType": "Quote",
                "status": "Indication",
                "grossPremium": 312.22,
                "allocatedTo": "Andy Marples",
                "allocatedCompany": "Broker"
            },
            {
                "riskId": 3,
                "reference": "HISC9308342",
                "insuredName": "Test",
                "inceptionDate": "April 28, 2016",
                "riskType": "Quote",
                "status": "Indication",
                "grossPremium": 312.2,
                "allocatedTo": "Broker User",
                "allocatedCompany": "Broker"
            },
            {
                "riskId": 4,
                "reference": "HISC9308344",
                "insuredName": "Test",
                "inceptionDate": "April 29, 2016",
                "riskType": "Quote",
                "status": "Quoted",
                "grossPremium": 444.12,
                "allocatedTo": "Broker User",
                "allocatedCompany": "Broker"
            },
            {
                "riskId": 5,
                "reference": "HISC9308345",
                "insuredName": "Test",
                "inceptionDate": "May 02, 2016",
                "riskType": "Quote",
                "status": "Indication",
                "grossPremium": 423.82,
                "allocatedTo": "Broker User",
                "allocatedCompany": "Broker"
            }
            ,
            {
                "riskId": 6,
                "reference": "HISC9308340",
                "insuredName": "Upper Loi",
                "inceptionDate": "April 25, 2016",
                "riskType": "Quote",
                "status": "Indication",
                "grossPremium": 312.22,
                "allocatedTo": "Andy Marples",
                "allocatedCompany": "Broker"
            },
            {
                "riskId": 7,
                "reference": "HISC9308342",
                "insuredName": "Test",
                "inceptionDate": "April 28, 2016",
                "riskType": "Quote",
                "status": "Indication",
                "grossPremium": 312.22,
                "allocatedTo": "Broker User",
                "allocatedCompany": "Broker"
            },
            {
                "riskId": 8,
                "reference": "HISC9308344",
                "insuredName": "Test",
                "inceptionDate": "April 29, 2016",
                "riskType": "Quote",
                "status": "Quoted",
                "grossPremium": 444.12,
                "allocatedTo": "Broker User",
                "allocatedCompany": "Broker"
            },
            {
                "riskId": 9,
                "reference": "HISC9308345",
                "insuredName": "Test",
                "inceptionDate": "May 02, 2016",
                "riskType": "Quote",
                "status": "Indication",
                "grossPremium": 423.82,
                "allocatedTo": "Broker User",
                "allocatedCompany": "Broker"
            }

        ];
    }
}

风险list.component.ts

import { Component, OnInit } from '@angular/core';
import { IRisk } from './risk';
import { RiskService } from './risk.service';
import { DataTable, Column } from 'primeng/primeng';
import {Header} from 'primeng/primeng';
import {Footer} from 'primeng/primeng';
import {Paginator} from 'primeng/primeng';


@Component({
    selector: 'rm-risks',
    directives: [DataTable, Column, Header, Footer, Paginator, RiskService],
    templateUrl: '/app/components/risks/risk-list.component.html'
    })

export class RiskListComponent implements OnInit {
    pageTitle: string = 'Risk List';

    risks: IRisk[];

    constructor(private _riskService: RiskService) {
    }

    ngOnInit(): void {
        this.risks = this._riskService.getRisks();
    }
};

app.component.ts

import { Component } from '@angular/core';
import { RiskListComponent } from './components/risks/risk-list.component';
import { DataTable, Column } from 'primeng/primeng';
import { RiskService } from './components/risks/risk.service';

@Component({
    selector: 'my-app',
    providers: [RiskService],
    template: `
    <div>
        <h1>{{pageTitle}}</h1>
          <rm-risks> </rm-risks> 
     </div>
     ` ,
    directives: [RiskListComponent, DataTable, Column]

})

export class AppComponent {
    pageTitle: string = 'Test UK Trader'; 
}

Answer 1

在risk-list.component.ts

中

由于RiskService不是指令，因此不应在此处列出：

directives: [DataTable, Column, Header, Footer, Paginator, **RiskService**]

相反，它应该像这样导入

import { RiskService } from './risk.service';
directives: [DataTable, Column, Header, Footer, Paginator]
providers: [RiskService]

Answer 2

您应该将您的服务定义为组件的providers属性：

@Component({
  selector: 'rm-risks',
  directives: [DataTable, Column, Header, Footer, Paginator],
  providers: [RiskService],
  templateUrl: '/app/components/risks/risk-list.component.html'
})
export class RiskListComponent implements OnInit {
  (...)
}

或当您引导应用程序时：

bootstrap(AppComponent, [RiskService]);

例外：在angular2应用程序中找不到RiskService的指令注释

2 个答案: