我创建了AngularJS 2服务并在2个不同的组件中使用它:App-Component&子组件。每个输出属性'log'(一个字符串)我的服务。
StateService类:
@Injectable ()
class StateService {
public log : string;
static count : number = 0;
constructor () {
this.log = '';
StateService.count++;
this.writeToLog ('CREATED '+StateService.count+' at ' + new Date().toString());
}
public writeToLog (text : string) : void {
this.log += text + '\n';
}
}
组件:
@Component ({
selector : 'Sub-Component',
template : `<hr>
This is the Sub-Component !
<BR>
StateService Log :
<pre>{{ _stateService.log }}</pre>
<button (click)="WriteToLog ()">Write to log</button>
`,
providers : [StateService]
})
export class SubComponent {
constructor (private _stateService : StateService) {
}
public WriteToLog () : void {
this._stateService.writeToLog ('From Sub-Component - This is '+new Date().toString());
}
}
代码here
的实例我除了创建一次服务以及每个组件调用WriteToLog方法时,每个组件的输出都是相同的但不是。
输出示例:
App-Component可以输出:
实例1 - 于2016年1月21日星期四11:43:51创建
来自App-Component - 这是2016年1月21日星期四11:43:54
来自App-Component - 这是2016年1月21日星期四11:43:55
并且子组件可以输出:
实例2 - 于2016年1月21日星期四11:43:51创建
来自子组件 - 这是2016年1月21日星期四11:43:57
来自子组件 - 这是2016年1月21日星期四11:43:58
所以似乎创建了2个服务实例(实例1 +实例2)
我只想要一个实例;)当我在日志中追加字符串时,它必须出现在两个组件中。
感谢您的帮助
答案 0 :(得分:32)
更新Angular&gt; = 2.0.0-RC.6
不要将服务添加到组件的提供者。 而是将其添加到
@NgModule({ providers: [...], ...
(不延迟加载的模块,因为延迟加载的模块引入了自己的范围)
@Component ({
selector : 'Sub-Component',
template : `<hr>
This is the Sub-Component !
<BR>
StateService Log :
<pre>{{ _stateService.log }}</pre>
<button (click)="WriteToLog ()">Write to log</button>
`,
// providers : [StateService] <== remove
})
Angular&lt; = 2.0.0-RC.5
如果将其添加到组件上,则会为每个组件实例获取新的服务实例。而是将其添加到
bootstrap(AppComponent, [StateService]);
通过将其添加到单个组件中可以获得更细粒度的控制,然后此组件和所有子项都会注入相同的实例,否则应用程序将使用bootstrap()
创建的实例。这是Angulars DI中的“等级”。
另见
- http://blog.thoughtram.io/angular/2015/05/18/dependency-injection-in-angular-2.html
- http://blog.thoughtram.io/angular/2015/09/17/resolve-service-dependencies-in-angular-2.html
答案 1 :(得分:3)
除了Günter的好答案之外,这个链接还可以提供有关Angular2的层次依赖注入如何工作的更多细节: