Using Angular: Passing a service as a parameter

Question

Using Angular: Passing a service as a parameter

I have a desire to improve the organization of my code by moving certain functions into an external file and accessing them from multiple components.

These functions rely on a service:

The MyFunctions Class

import { Service1 } from "../_services";
export class MyFunctions {
  constructor(private service: Service1) {}
  bookingFunctions = {
    confirm: (id: any) => {
      this.service.confirmTrip(id);
    }
  };
}

My Component Implementation

import MyFunctions from "../../../functions";
...
export class AppComponent {
  constructor(
    private service: Service1
    ) {}
...
    myFunctions = new MyFunctions(this.service);
... 
    confirmBooking(id: number){
      this.myFunctions.bookingFunctions.confirmBooking(id);
    }
... 
}

After successfully implementing this setup, I am curious as to why it is not more commonly used. Are there any drawbacks to this approach?

Is it acceptable to pass the service instance Service1 to the constructor of the MyFunctions class?

I find myself wondering, "It works! But how?"

angular typescript service

Answer 1

Answer №1

It is possible that within your 'Service1' service, you have the following code:

@Injectable({ providedIn: 'root' })

This means that the service instance will be shared across the entire application, similar to a singleton.

If you do not include providedIn: 'root', and instead inject the service into the PROVIDERS:[] section of a module, the service will only work within that specific module.

Alternatively, if you define the service within a component like this:

// Component A

@Component({
/* . . . */
  providers: [MyService]
})

The service will only be available to that component and its descendants, not to other components. If another component also declares the same service in a similar manner:

// Component B

@Component({
/* . . . */
  providers: [MyService]
})

both components will not share the same service; they will each have their own separate instances of the service.

Answer 2

It is possible that within your 'Service1' service, you have the following code:

@Injectable({ providedIn: 'root' })

This means that the service instance will be shared across the entire application, similar to a singleton.

If you do not include providedIn: 'root', and instead inject the service into the PROVIDERS:[] section of a module, the service will only work within that specific module.

Alternatively, if you define the service within a component like this:

// Component A

@Component({
/* . . . */
  providers: [MyService]
})

The service will only be available to that component and its descendants, not to other components. If another component also declares the same service in a similar manner:

// Component B

@Component({
/* . . . */
  providers: [MyService]
})

both components will not share the same service; they will each have their own separate instances of the service.

Using Angular: Passing a service as a parameter

Answer №1

Similar questions

What is the best way to effectively handle the proxying of objects across multiple levels?

Determine the specific cell involved in an HTML5 drag-and-drop interaction within a table

Transforming an array of elements into an object holding those elements

The custom FontAwesome icon is failing to display properly

The Angular component fails to retrieve data from a subscribed service when the data is being fetched from the sessionStorage

execute the function once the filereader has completed reading the files

Execute various Office Scripts functions within a single script based on the button that is selected

The Angular SSR feature is throwing errors due to non-ESM modules present in my Express API implementation

How can we remove a dynamic component in Angular?

Double curly brace Angular expressions being repeatedly evaluated during mouse click events

Issue with the loss of scope in the Subscribe event causing the Clipboard Copy Event

When performing an arithmetic operation, the right operand must be a data type of 'any', 'number', 'bigint', or an enumeration type

Troubleshooting TypeScript compatibility with SystemJS when encountering problems with the .js extension

What is the reason for storing a base64 string as an Object in a MongoDB database?

Value in Hook not updating after memoization of parent component

Fetching all data from a SQLite database in a Listview using React Native

Encountering issues with Angular 4 routing functionality in production environment

Passing Imported Module to Feature Module in Angular 7

Creating a variety of themes with unique color palettes for Angular Material along with custom-designed components

Utilize Nativescript XML template for code reusability without the need for Angular