如果在具有元注释的组件之后定义类，则该类不可注入

本文介绍了如果在具有元注释的组件之后定义类，则该类不可注入的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我刚刚开始使用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）

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

使用代码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（）; 
} 
}

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

解决方案

JavaScript不提升类。使用，移动 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上绑定。 
} 
}

另请参见

- 角度2错误：

-

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.

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

解决方案

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.
    }
}

这篇关于如果在具有元注释的组件之后定义类，则该类不可注入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

dataService

如果在具有元注释的组件之后定义类，则该类不可注入

问题描述