angular2：注入到组件服务不appInject工作 [英] angular2: Inject a service to component not working with appInject

问题描述

我在谷歌之后的 angular2快速启动（无Github上的这些​​例子？！）

一切都顺利工作，直到是时候注入一个服务（我创建的）。

这是我的code：

\r

\r

进口{组件，视图，引导，NgFor}从'angular2 / angular2';\r
\r
类FriendsService {\r
名称：数组＆LT;字符串取代;\r
\r
构造函数（）{\r
this.names = ['阿维亚德'，'陈'，'亚登'];\r
}\r
}\r
\r
@零件（{\r
选择：'显示'，\r
appInjector：[FriendsService]\r
}）\r
@视图（{\r
模板：\r
＆LT; P＆gt;我的名字：{{} MYNAME}＆LT; / P＆GT;\r
＆LT; P＆GT;朋友：其中，P＆​​GT;\r
＆LT; UL＆GT;\r
＆LT;李·纳克换=名称＃名称＆GT;\r
\t\t\t{{名称}}\r
＆LT; /李＆GT;\r
＆LT; / UL＆GT;\r
，\r
指令：[NgFor]\r
}）\r
\r
出口缺省类DisplayComponent {\r
MYNAME：字符串;\r
名称：数组＆LT;字符串取代;\r
\r
构造函数（friendsService：FriendsService）{\r
this.myName ='爱丽丝';\r
this.names = friendsService.names;\r
}\r
}

\r

\r

\r

我遇到了很多例外情况，但第一个，我认为是最相关的是：

 异常：无提供商FriendsService！ （DisplayComponent  - ＆GT; FriendsService）
angular2.dev.js：22367堆栈跟踪：
angular2.dev.js：22367错误：DI异常    在NoBindingError.BaseException（angular2.dev.js：7735）
    在NoBindingError.AbstractBindingError（angular2.dev.js：9029）
    在新NoBindingError（angular2.dev.js：9052）
    在Injector.execute._proto._throwOrNull（angular2.dev.js：27552）
    在Injector.execute._proto._getByKeyDefault（angular2.dev.js：27597）
    在Injector.execute._proto._getByKey（angular2.dev.js：27545）
    在Injector.execute._proto._getByDependency（angular2.dev.js：27533）
    在Injector.execute._proto._instantiate（angular2.dev.js：27430）
    在Injector.execute._proto._new（angular2.dev.js：27403）
    在InjectorInlineStrategy.execute.protoStrategy.instantiateBinding（angular2.dev.js：27192）
angular2.dev.js：22367错误上下文：
 

一件事，可能是相关的是，＆lt;显示＆GT; 组件是一个指令的＆LT;我的应用＆GT; 组件：

\r

\r

进口{组件，查看，引导}从'angular2 / angular2';\r
从./show-properties'进口DisplayComponent;\r
\r
@零件（{\r
选择：我的应用\r
}）\r
@视图（{\r
模板：＆lt;显示＆GT;，\r
指令：[DisplayComponent]\r
}）\r
类AppComponent {}\r
\r
引导（AppComponent）;

\r

\r

\r

被这个苦苦挣扎了一段时间，似乎无法找到任何相关的答案，大量的问题，这已经在这里。

解决方案

这奏效了：

  @Component（{
    选择：'显示'，
    绑定：[FriendsService] //而非appInjector
}）
 

当别的保持与上述相同。

反正根据的changelog 这是一个重大更改（感谢杰西好）：

  

重大更改

  
  

在appInjector属性已被删除。相反，使用 viewInjector 或 hostInjector

  
  

我猜测，Angular2快速入门指南是不是最新的，因为我以为。

I'm following google's angular2 quick start (no Github for these examples?!)

Everything was working smoothly until it was time to inject a service (which I created).

This is my code:

import {Component, View, bootstrap, NgFor} from 'angular2/angular2';

class FriendsService {
	names: Array<string>;
	
	constructor(){
		this.names = ['Aviad', 'Chen', 'Yarden'];
	}
}

@Component({
	selector: 'display',
	appInjector: [FriendsService]
})
@View({
	template:
	<p>My name: {{ myName }}</p>
	<p>Friends:<p>
	<ul>
		<li *ng-for="#name of names">
			{{name}}
		</li>
	</ul>
	,
	directives: [NgFor]
})

export default class DisplayComponent {
	myName: string;
	names: Array<string>;
	
	constructor(friendsService: FriendsService){
		this.myName = 'Alice';
		this.names = friendsService.names;
	}
}

I ran into a lot of exceptions but the first one and what I think is the most relevant is:

EXCEPTION: No provider for FriendsService! (DisplayComponent -> FriendsService)
angular2.dev.js:22367 STACKTRACE:
angular2.dev.js:22367 Error: DI Exception

    at NoBindingError.BaseException (angular2.dev.js:7735)
    at NoBindingError.AbstractBindingError (angular2.dev.js:9029)
    at new NoBindingError (angular2.dev.js:9052)
    at Injector.execute._proto._throwOrNull (angular2.dev.js:27552)
    at Injector.execute._proto._getByKeyDefault (angular2.dev.js:27597)
    at Injector.execute._proto._getByKey (angular2.dev.js:27545)
    at Injector.execute._proto._getByDependency (angular2.dev.js:27533)
    at Injector.execute._proto._instantiate (angular2.dev.js:27430)
    at Injector.execute._proto._new (angular2.dev.js:27403)
    at InjectorInlineStrategy.execute.protoStrategy.instantiateBinding (angular2.dev.js:27192)
angular2.dev.js:22367 ERROR CONTEXT:

One thing that may be relevant is that the <display> component is a directive of the <my-app> component:

import {Component, View, bootstrap} from 'angular2/angular2';
import DisplayComponent from './show-properties';

@Component({
	selector: 'my-app'
})
@View({
	template: '<display>',
	directives: [DisplayComponent]
})
class AppComponent { }

bootstrap(AppComponent);

Been struggling with this for some time and can't seem to find any relevant answer to the plenty of questions that already here.

解决方案

This did the trick:

@Component({
    selector: 'display',
    bindings: [FriendsService] // instead of appInjector
})

When anything else remained the same as above.

Anyway according to the changelog this was a breaking change (thanks jesse Good):

BREAKING CHANGES

THe appInjector property has been removed. Instead use viewInjector or hostInjector.

I guess that the Angular2 Quick Start guide is not as up to date as I thought.

这篇关于angular2：注入到组件服务不appInject工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！