Preserve instance of class in Angular 5

Question

Is actually possible to do something like this?

import {Injectable} from '@angular/core';

@Injectable()
export class UbiSharedService {

    private _ubiData: object = {};

    private $$instance: UbiSharedService;

    constructor() {

    }

    public setData(key: string, data: any) {
        this._ubiData[key] = data;
    }

    public getData(key: string): any {
        return this._ubiData[key];
    }

    public popData(key: string): any {
        return delete this._ubiData[key];
    }

    public getInstance(): UbiSharedService {
        if (!!this.$$instance && this.$$instance instanceof UbiSharedService) {
            //NOOP
        }
        else {
            this.$$instance = new UbiSharedService();
        }

        return this.$$instance;
    }


}

What are you trying to achieve? The standard behavior of injecting services injects them as a singleton. The state of a singleton will preserve throughout the lifetime of the application. In the case of an Angular application it will preserve as long as the browser window is open. — Julien Ambos
– Julien Ambos, Commented Jan 18, 2018 at 16:07
I'm trying to read/write data from multiple components. But I'm having some issues finding the way of using this methods from the components... — Sampgun
– Sampgun, Commented Jan 18, 2018 at 16:11
So you are trying to use the service in components and call the methods of this service, e.g. setData or getData? — Julien Ambos
– Julien Ambos, Commented Jan 18, 2018 at 16:14
I'd like to call setData from A.component and read the same data from B.component :) — Sampgun
– Sampgun, Commented Jan 18, 2018 at 16:16

DeborahK · Accepted Answer · 2018-01-18 16:13:49Z

3

Get rid of the $$instance and instead inject the service into the components that need it using the constructor.

constructor(private productService: ProductService,
                private productParameterService: ProductParameterService) { }

Then the component can access the service methods using the productService or productParameterService properties.

answered Jan 18, 2018 at 16:13

DeborahK

60.9k12 gold badges115 silver badges136 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Julien Ambos · Accepted Answer · 2018-01-18 16:17:56Z

1

Please see the following documentation from Angular to learn how to use services to share data between unrelated components: https://angular.io/guide/singleton-services.

You can inject services in components by adding them to the constructor of the component:

constructor(
    private ubiSharedService: UbiSharedService
) { 
   // You can now call in the methods of ubiSharedService
   // e.g.: this.ubiSharedService.setData('key', { value: 'Value' });
}

edited Jan 18, 2018 at 16:17

answered Jan 18, 2018 at 16:16

Julien Ambos

2,10817 silver badges30 bronze badges

3 Comments

DeborahK Over a year ago

This is my same suggestion ... just with a better example showing your particular scenario.

Sampgun Over a year ago

Yes I understood that. In fact I'll pick your answer since you answered first :)

Julien Ambos Over a year ago

@DeborahK please update your answer for others that come here. Include the link to the singleton services angular documentation page.

Collectives™ on Stack Overflow

Preserve instance of class in Angular 5

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related