Angular 2 - 创建了多个服务实例 [英] Angular 2 - multiple instance of service created

问题描述

我创建了 AngularJS 2 服务并在 2 个不同的组件中使用它:App-Component &子组件.我的服务的每个输出属性log"(一个字符串).

I have created AngularJS 2 service and use it in 2 differents components : App-Component & Sub-Component. Each one output property 'log' (a string) of my service.

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());
    }
}

代码的实时示例此处

我除了服务被创建一次，当每个组件调用WriteToLog方法时，每个组件的输出都是相同的，但事实并非如此.

I except that service is created once and when each component call WriteToLog method, the output is the same in each component but it's not.

输出示例:

App-Component 可以输出这个:

The App-Component can output this :

实例 1 - 创建于 2016 年 1 月 21 日星期四 11:43:51

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

来自 App-Component - 这是 2016 年 1 月 21 日星期四 11:43:54

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

来自 App-Component - 这是 2016 年 1 月 21 日星期四 11:43:55

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

并且子组件可以输出:

实例 2 - 创建于 2016 年 1 月 21 日星期四 11:43:51

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

来自子组件 - 这是 2016 年 1 月 21 日星期四 11:43:57

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

来自子组件 - 这是 2016 年 1 月 21 日星期四 11:43:58

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

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

So it appear that 2 instance of service is created (instance 1 + instance 2)

我只想要一个实例 ;) 并且当我在日志中附加字符串时，这必须出现在两个组件中.

I only want one instance ;) and when I append string in log, this must appear in both component.

感谢您的帮助

推荐答案

更新 Angular >= 2.0.0-RC.6

不要将服务添加到组件的提供者中.而是将其添加到

Don't add the service to the providers of the component. Instead add it to

@NgModule({ providers: [...], ...

(属于不延迟加载的模块，因为延迟加载的模块引入了自己的作用域)

(of a module that is not lazy loaded because lazy loaded modules introduce their own scope)

@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
})

角度 <=2.0.0-RC.5

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

If you add it on a component you get a new service instance for each component instance. Instead add it to

bootstrap(AppComponent, [StateService]);

您可以通过将其添加到单个组件来获得更细粒度的控制，然后该组件和所有子组件都会注入相同的实例，否则应用程序将使用 bootstrap() 创建的实例.这是 Angulars DI 中的分层".

You can have more fine-grained control by adding it to a single component, then this component and all children get the same instance injected but otherwise the application works with the instance created by bootstrap(). This is the "hierarchical" in Angulars DI.

另见
- http://blog.thoughtram.io/angular/2015/05/18/dependency-injection-in-angular-2.html
- http://blog.thinkram.io/angular/2015/09/17/resolve-service-dependencies-in-angular-2.html

这篇关于Angular 2 - 创建了多个服务实例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！