gpt4 book ai didi

Angular 2 - 创建的多个服务实例

转载 作者:太空狗 更新时间:2023-10-29 16:50:12 24 4
gpt4 key购买 nike

我创建了 AngularJS 2 服务并在 2 个不同的组件中使用它:应用程序组件和子组件。我的服务的每个输出属性“log”(一个字符串)。

状态服务类:

@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 可以输出这个:

Instance 1 - Created at Thu Jan 21 2016 11:43:51

From App-Component - This is Thu Jan 21 2016 11:43:54

From App-Component - This is Thu Jan 21 2016 11:43:55

子组件可以输出这个:

Instance 2 - Created at Thu Jan 21 2016 11:43:51

From Sub-Component - This is Thu Jan 21 2016 11:43:57

From Sub-Component - This is Thu Jan 21 2016 11:43:58

因此看起来创建了 2 个服务实例(实例 1 + 实例 2)

我只想要一个实例;)并且当我在日志中追加字符串时,它必须出现在两个组件中。

谢谢你的帮助

最佳答案

更新 Angular >= 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 <=2.0.0-RC.5

如果将它添加到一个组件上,您会为每个组件实例获得一个新的服务实例。而是将其添加到

bootstrap(AppComponent, [StateService]);

您可以通过将其添加到单个组件来获得更细粒度的控制,然后该组件和所有子组件都会注入(inject)相同的实例,否则应用程序将使用 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

关于Angular 2 - 创建的多个服务实例,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34929665/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com