如果在具有元注释的组件之后定义类，则该类不可注入 [英] Class is not injectable if it is defined right after a component with meta annotation

问题描述

我刚刚开始使用Angular2快速启动项目。有一个简单的应用工作。我添加了 DataService 类，以使代码有分离关注。

最初我添加了 DataService 在我的主要组件应用程序之后写入 MyAppComponent ，如下所示。

$来自'angular2 / core'的b $ b

  import {Component，View}; 
 import {NgFor} from'angular2 / common'; 
 import {bootstrap} from'angular2 / platform / browser'; 
 
 @Component（{
'selector'：'my-app'，
 template：`< div * ngFor =＃item of items> {{item 
指令：[NgFor]，
 providers：[DataService] //将服务作为可注入的
}）
 export class MyAppComponent {
 items：Array< number> ;; 
构造函数（service：DataService）{
 this.items = service.getItems（）; //检索列表以在UI上绑定。 
} 
} 
 //创建服务，但其后有元注释
的组件export class DataService {
 items：Array< number> ;; 
 constructor（）{
 this.items = [1，2，3，4]; 
} 
 getItems（）{
 return this.items; //返回项目列表
} 
} 
 
 bootstrap（MyAppComponent）
  

以上代码正确编译，但在运行时它会抛出错误。

EXCEPTION：无法解析所有参数for
MyAppComponent（undefined）。确保它们都有有效的类型或
注释。

使用代码2小时后，我转移了code> DataService 刚刚在 MyAppComponent 之上的工作。我真的很高兴这个问题解决了。

但是我很好奇地知道，为什么如果我把 DataService 类之后，类与 MetaAnnotation b

修改

我尝试过如下所示的@GünterZöchbauer的解决方案，

来自'angular2 / core'的

  import {Component，View，Inject，forwardRef}; 
 import {NgFor} from'angular2 / common'; 
 import {bootstrap} from'angular2 / platform / browser'; 
 
 @Component（{
'selector'：'my-app'，
 template：`< div * ngFor =＃item of items> {{item 
指令：[NgFor]，
 providers：[DataService] //尝试评论这个仍然会抛出错误
}）
 export class MyAppComponent {
 items：Array< number> ;; 
构造函数（@Inject（forwardRef（（）=> DataService））service：DataService）{
 this.items = service.getItems（）; 
} 
} 
  

但在控制台中仍然收到错误。看起来有漏洞

EXCEPTION：TypeError：无法读取未定义的属性'toString'

解决方案

JavaScript不提升类。使用 forwardRef ，移动 DataService 到它自己的文件或移动 DataService 上面的 MyAppComponent

  @Component（{
'selector'：'my-app'，
 template：`< div * ngFor = #item of items> {{item}}< / div>`，
指令：[NgFor]，
 providers：[forwardRef（（）=> DataService）] service as injectionable 
}）
 export class MyAppComponent {
 items：Array< number> ;; 
构造函数（@Inject（forwardRef（（）=> DataService））service：DataService）{
 this.items = service.getItems（）; //检索列表以在UI上绑定。 
} 
} 
  

另请参见

- <一个href =https://stackoverflow.com/questions/34306041/angular-2-error/34309922#34309922>角度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屋！