尽管将相同的依赖项传递给其他服务,但未定义传递给构造函数的Angular2 Service的依赖项

时间:2016-08-22 18:04:42

标签: angular typescript dependency-injection webpack angular2-services

我必须注入服务" org-agents-service"组件"组织代理组件"。依赖项解析程序无法解析需要api-service的org-agents-service的任何参数。

以下是组件/服务的层次结构(不包括不相关的服务/组件) 基本上,每个进行外部调用的服务都使用api-service,它是http模块的包装。

搜索组件和服务没有注入依赖项的问题,但组织代理服务会产生此描述性错误:browser_adapter.js:84EXCEPTION: Can't resolve all parameters for OrgAgentsService: (?).

/app-component
    /dashboard-component
       /agent-search-component
           *search-service
               *api-service
       /task-search-component
           *search-service
               *api-service
       /search-view-component
           *search-service
               *api-service
       /org-agents-component
           *org-agents-service
               *api-service

将Webpack与Angular2 Rc 4(打字稿)一起使用。这是服务代码。它相当简单。这取决于Api服务,它也被(成功)注入其他几个服务。

import {Injectable} from '@angular/core'
import {ApiService} from '../common/services/api.service'
import {Agent} from '../models/agent.model'

Injectable();
export class OrgAgentsService {
    constructor(private apiService: ApiService) {

    }
    public orgId: number;
    public agents: Agent[];

    public retrieveAgentsList(orgId) {
        let url: string = `https://blahblahblah.blah.blah/endpoint/${orgId}/agents`;

        return this.apiService.get(url).map((data, err) => {
            if(!err) {
                for(let agentResult of data.body) {
                    let agentModel = this.extractAgentSearchResult(agentResult);
                    this.agents.push(agentModel)
                }
                return this.getAgents();
            }
            console.log(`[ERROR: OrgAgentService] could not retrieve agents for org ${this.orgId}`);
            return null
        })
    }

    public getAgents(): Agent[] {
        return this.agents
    }

    private extractAgentSearchResult(item: any): Agent {
        console.log(" agent data: " + JSON.stringify(item));
        let id = item["id"];
        let name = item["name"];
        let email = item["email"];
        let foreign_id = item["foreign_id"];
        let org_id = item["org_id"];
        let roles = "";
        for (var i = 0, n = item["roles"].length; i < n; i++) {
            roles = roles + item["roles"][i] + " ";
        }
        return new Agent(id, name, email, foreign_id, org_id, roles)
    }
}

这是需要服务的组件的代码:

import {Component, OnInit, OnChanges} from '@angular/core'
import {OrgAgentsService} from "../../services/org-agents.service";
import {Agent} from '../../models/agent.model'
import {AgentDetailComponent} from '../agent-detail/agent-detail.component'
import {ApiService} from "../../common/services/api.service";

@Component({
    selector: 'org-agents-list',
    providers: [OrgAgentsService, ApiService],
    directives: [AgentDetailComponent],
    template: require('./org-agents.template.html')
})
export class OrgAgentsComponent implements OnInit, OnChanges {
    constructor(private orgAgentsSvc: OrgAgentsService) {

    }
    private agents: Agent[];
    public agentId: number;
    private orgId: number;

    ngOnInit() {
        this.getAgents()
    }

    ngOnChanges() {
        this.getAgents();
    }

    getAgents() {
        this.orgAgentsSvc.retrieveAgentsList(this.orgId).subscribe(agents=>{
            this.agents = agents;
        });
    }
    onSelect(agent: Agent){
        this.agentId = agent.id;
        let elem = <HTMLElement>document.querySelector('#agentDetailsModalOrgList ');
        elem.style.display="block";
    }

    private onAgentDetailsClose($event){
        let elem = <HTMLElement>document.querySelector('#agentDetailsModalOrgList ');
        elem.style.display="none";
    }
}

1 个答案:

答案 0 :(得分:2)

我有这个错误了一段时间......最后对我来说这是一个语法错误。我注意到你的OrgAgentsService中有Injectable()而不是@Injectable()。这是剪切和粘贴错误还是在原始代码中?你也有;在它的尽头不应该在那里。