如果它与元注解的组件后立即定义的类不注射 [英] Class is not injectable if it is defined right after a component with meta annotation

问题描述

我刚开始了与Angular2快速启动项目。有一个简单的应用程序的工作。我加了的DataService 类，使code将关注的分离。

起初，我已经添加了的DataService 类写的应用程序的我的主要成分，是在 MyAppComponent 象下面这样

 进口{组件，查看}从'angular2 /核心;
进口{} NgFor从'angular2 /通用';
从angular2 /平台/浏览器的进口{}引导;@零件（{
    选择：我的应用，
    模板：`＆LT; LT {{项目}}; DIV * ngFor =＃项目的项目＆GT / DIV＆GT;`
    指令：[NgFor]
    供应商：[DataService的] //以服务为注射
}）
出口类MyAppComponent {
    项目：数组＆LT;号取代;
    构造函数（服务：DataService的）{
        this.items = service.getItems（）; //检索列表在UI上结合。
    }
}
//创建的服务，但其具有的元注释组件后
出口类的DataService {
    项目：数组＆LT;号取代;
    构造函数（）{
        this.items = [1，2，3，4〕;
    }
    getItems（）{
        返回this.items; //返回项目列表
    }
}引导（MyAppComponent）
 

以上code编译正确，但在运行时，它抛出下面的错误。

  

例外：无法解析所有参数
  MyAppComponent（不确定）。确保他们都有有效的类型或
  注释。

与code打2小时后，我转移了的DataService 略高于 MyAppComponent 这得到了工作。我真的很高兴这个问题解决了。

不过我很好奇，想知道，为什么，如果我放不工作的DataService 的下课正确的类与 MetaAnnotation 过来的吗？

修改

我试图通过解决冈特@像Zöchbauer下面给

 进口{组件，景观，注入，forwardRef}从'angular2 /核心;
进口{} NgFor从'angular2 /通用';
从angular2 /平台/浏览器的进口{}引导;@零件（{
    选择：我的应用，
    模板：`＆LT; LT {{项目}}; DIV * ngFor =＃项目的项目＆GT / DIV＆GT;`
    指令：[NgFor]
    供应商：[DataService的] //试图评论这仍然会抛出错误。
}）
出口类MyAppComponent {
    项目：数组＆LT;号取代;
    构造函数（@注入（forwardRef（（）=＆GT;的DataService））服务：DataService的）{
        this.items = service.getItems（）;
    }
}
 

但在控制台仍然得到错误。这看起来wiered

  

例外：类型错误：无法读取的未定义的属性'的toString

解决方案

JavaScript不葫芦类。无论是使用 forwardRef ，移动 DataService的来它自己的文件或移动的DataService 类上面 MyAppComponent

  @Component（{
    选择：我的应用，
    模板：`＆LT; LT {{项目}}; DIV * ngFor =＃项目的项目＆GT / DIV＆GT;`
    指令：[NgFor]
    供应商：[forwardRef（（）=＆GT;的DataService）] //以服务为注射
}）
出口类MyAppComponent {
    项目：数组＆LT;号取代;
    构造函数（@注入（forwardRef（（）=＆GT;的DataService））服务：DataService的）{
        this.items = service.getItems（）; //检索列表在UI上结合。
    }
}
 

另请参阅结果
- 角2错误：结果
- http://blog.thoughtram.io/angular/2015/09/03/forward-references-in-angular-2.html

I just started off with Angular2 quick start project. Have a simple application working. I added DataService class, so that the code will have separation of concern.

Initially I've added the DataService class write after the my main component of app which is MyAppComponent like below.

import {Component, View} from 'angular2/core';
import {NgFor} from 'angular2/common';
import {bootstrap} from 'angular2/platform/browser';

@Component({
    'selector': 'my-app',
    template: `<div *ngFor="#item of items">{{item}}</div>`,
    directives: [NgFor],
    providers: [DataService] //taking service as injectable
})
export class MyAppComponent {
    items: Array<number>;
    constructor(service: DataService) {
        this.items = service.getItems(); //retrieving list to bind on the UI.
    }
}
//created service, but its after the component which has meta annotation
export class DataService {
    items: Array<number>;
    constructor() {
        this.items = [1, 2, 3, 4];
    }
    getItems() {
        return this.items; //return the items list
    }
}

bootstrap(MyAppComponent)

Above code compiles correctly, but at run-time it throws below error.

EXCEPTION: Cannot resolve all parameters for MyAppComponent(undefined). Make sure they all have valid type or annotations.

After 2 hours playing with the code, I shifted the DataService just above the MyAppComponent which got worked. I'm really glad that issue solved.

But I'm very curious to know that, why it wasn't working if I placed DataService class right after the class with MetaAnnotation over it?

Edit

I tried solution give by @Günter Zöchbauer like below,

import {Component, View, Inject, forwardRef} from 'angular2/core';
import {NgFor} from 'angular2/common';
import {bootstrap} from 'angular2/platform/browser';

@Component({
    'selector': 'my-app',
    template: `<div *ngFor="#item of items">{{item}}</div>`,
    directives: [NgFor],
    providers: [DataService] //tried commenting this still throws error.
})
export class MyAppComponent {
    items: Array<number>;
    constructor(@Inject(forwardRef(() => DataService)) service: DataService) {
        this.items = service.getItems();
    }
}

but still getting error in console. which looks wiered

EXCEPTION: TypeError: Cannot read property 'toString' of undefined

解决方案

JavaScript doesn't hoist classes. Either use forwardRef, move DataService to it's own file or move DataService class above MyAppComponent

@Component({
    'selector': 'my-app',
    template: `<div *ngFor="#item of items">{{item}}</div>`,
    directives: [NgFor],
    providers: [forwardRef(() => DataService)] //taking service as injectable
})
export class MyAppComponent {
    items: Array<number>;
    constructor(@Inject(forwardRef(() => DataService)) service: DataService) {
        this.items = service.getItems(); //retrieving list to bind on the UI.
    }
}

See also
- Angular 2 error:
- http://blog.thoughtram.io/angular/2015/09/03/forward-references-in-angular-2.html

这篇关于如果它与元注解的组件后立即定义的类不注射的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！