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

What are some methods for displaying images retrieved from an API onto an HTML webpage?

What is the best way to animate elements so that they move in a circular motion?

Switch between two PHP files with a toggle feature using jQuery click event

Angular Reactive Forms may not properly update other inputs when binding a control to multiple inputs

Update information in a table row and store it in the database using Ajax

React Redux Loading progress bar for seamless navigation within React Router

Troubleshooting: Page Unable to Import/Execute Linked JavaScript on WebStorm with Node.js Backend

Make sure to invoke the initialize function either in the ngOnInit lifecycle hook or

Concurrent Icons on Angular-Chart's Piechart

What is the best way to detect when an option is selected in a Material UI autocomplete component?

I am having trouble with searching for places using the Google API in my Node

Tips for obtaining a binary file sent through an HTTP:POST request using angular.js

"Contrasting the initialization of state in the constructor with managing state

variable value remains constant after being updated

Tips for resolving the issue when Chrome is able to load the page but Postman cannot find it

Clarification on the syntax for using SWR with Next.js

comprehending the concept of express and mastering its usage

Configuring route for serving static files in an Express server

Easily submit both FormData and a string in a single function call

Dynamic Formatting with Vue JS: Enhancing Phone Number Input