How to add a service to a static function in Angular

Question

How to add a service to a static function in Angular

After incorporating a logger service into my project, I have encountered an issue with using it in NGXS static selectors. The selectors in NGXS are static methods, which prevent me from accessing the logger service injected via Angular DI.

Are there any elegant solutions to seamlessly utilize the service within the selectors?

constructor(
  public logger: LoggerService
) {}

@Selector()
@ImmutableSelector()
public static get(state: StateModel) {
  // <-- Log via LoggerService
  return state.model;
}

javascript angular typescript ngxs

Answer 1

Answer №1

First and foremost, I advise against using a static method to consume your service as it is not considered a best practice.

If you still wish to proceed with using it:

You can simply import your service in the constructor and then utilize it like this:

export class myComponent {
  constructor(private logger: LoggerService) {
     this.constructor.logService = logger;
  }

  public static myMethod() {
   myComponent.logService.log_method()
     .subscribe(
       data => { console.log(data)   },
       error => { console.error(error); }
   );
  }
}

This question has already been addressed here. Access service into a static method in Angular 5. Feel free to do some further research on the topic.

Answer 2

First and foremost, I advise against using a static method to consume your service as it is not considered a best practice.

If you still wish to proceed with using it:

You can simply import your service in the constructor and then utilize it like this:

export class myComponent {
  constructor(private logger: LoggerService) {
     this.constructor.logService = logger;
  }

  public static myMethod() {
   myComponent.logService.log_method()
     .subscribe(
       data => { console.log(data)   },
       error => { console.error(error); }
   );
  }
}

This question has already been addressed here. Access service into a static method in Angular 5. Feel free to do some further research on the topic.

How to add a service to a static function in Angular

Answer №1

Similar questions

Exploring the power of V-for with checkboxes in VueJS

I am puzzled as to why my DataGrid MUI component is not functioning properly

Accessing a precise div element in a webpage

How does Angular2 indicate the modification in a segment of Component?

What is the process for modifying a Date type value in JavaScript?

What is the reason for the malfunction of this JavaScript code designed for a simple canvas operation?

Extract information from a webpage using Selenium WebDriver

Tips for verifying the response and status code in Angular 8 while uploading a file to an S3 Presigned URL and receiving a statusCode of 200

Tips on expanding the dimensions and incorporating more members in a radar graph's Chartjs tag

The Cordova InAppBrowser plugin has not been properly set up

The middleware is causing disruptions in the configuration of redis and express

tips on launching a pre-existing react native project

What are the best ways to keep a django page up to date without the need for manual

Implementing ng-if with asynchronous functions: A step-by-step guide

Collaborative service utilization in Angular 2

I am experiencing difficulties with implementing Angular material components in my project

Enabling Event bus suggestions for Typescript: A step-by-step guide

What is the proper method for terminating an Express app.all?

What is the best way to include a non-Typed Angular service in a TypeScript class?

Exploring how to utilize class properties within Angular templates