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

问题描述

我创建了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());
    }
}

代码此处

的实时示例

我只创建一次服务，并且当每个组件调用WriteToLog方法时，每个组件的输出是相同的，但是不是.

输出示例:

App-Component可以输出以下内容:

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

来自应用程序组件-这是2016年1月21日星期四

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

和子组件可以输出以下内容:

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

来自子组件-这是2016年1月21日，星期四

来自子组件-这是2016年1月21日，星期四

因此，似乎已创建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
})
 

角度< = 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

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 class :

@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 :

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

Live example of code here

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.

Example of output :

The App-Component can output this :

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

and the Sub-Component can output this :

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

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.

Thank you for your help

解决方案

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

Angular <=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]);

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.

See also
- 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-创建了多个服务实例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！