Collaborating on an Angular 2 service among child components that are not contained within the same parent component

Question

Collaborating on an Angular 2 service among child components that are not contained within the same parent component

Imagine having an Angular 2 setup with a root parent component A, two distinct children components B and C:

https://i.sstatic.net/w9bOf.jpg

Now, if there is a need to create a shared service called MyService that can be injected into both child components vertically, then one approach would involve wrapping each column of child components in an intermediate component P. By declaring MyService as a provider in the @Component decorator of P, Angular will automatically create separate instances of the service for each column:

https://i.sstatic.net/TlLTG.jpg

However, this method adds unnecessary complexity by introducing extra boilerplate code and requiring changes in how components are structured within the template of component A.

Is there a simpler way to accomplish this task in Angular 2 without resorting to intermediary wrapper components? Your suggestions are greatly appreciated!

angular typescript angular2-services

Answer 1

Answer №1

One effective solution is to have the parent component serve as the host for the injector and provider of MyService. This setup aligns with how Angular 2 Dependency Injection operates. Even if there exists a singleton service, such as MyServiceFactory, capable of generating instances of the MyService class, it would be challenging to determine how to ensure that multiple instances of B and C receive a shared instance of MyService.

In most cases, utilizing the parent component as the host is the preferred approach, unless there are insurmountable layout complications. Alternatively, one can implement a directive with the MyService provider:

@Directive({
  selector: '[p]',
  providers: [MyService]
})
class P {}

This configuration promotes a seamless layout integration:

<ng-container p>
  <b></b>
  <c></c>
</ng-container>
<ng-container p>
  <b></b>
  <c></c>
</ng-container>

Answer 2

One effective solution is to have the parent component serve as the host for the injector and provider of MyService. This setup aligns with how Angular 2 Dependency Injection operates. Even if there exists a singleton service, such as MyServiceFactory, capable of generating instances of the MyService class, it would be challenging to determine how to ensure that multiple instances of B and C receive a shared instance of MyService.

In most cases, utilizing the parent component as the host is the preferred approach, unless there are insurmountable layout complications. Alternatively, one can implement a directive with the MyService provider:

@Directive({
  selector: '[p]',
  providers: [MyService]
})
class P {}

This configuration promotes a seamless layout integration:

<ng-container p>
  <b></b>
  <c></c>
</ng-container>
<ng-container p>
  <b></b>
  <c></c>
</ng-container>

Answer 3

Answer №2

Have you ever considered implementing a static EventEmitter that both components can subscribe to?

I came across this idea one day and decided to give it a try in my project. So far, I haven't noticed any issues with it. As the application grows, I'll keep an eye out for any potential drawbacks.

// Here's the "commands dispatcher" class:

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

export class CommandsDispatcherService {
  private static store: { [channel: string]: EventEmitter<any> } = {};

  static get(channel: string): EventEmitter<any> {
    if (!this.store[channel]) {
      this.store[channel] = new EventEmitter();
    }
    return this.store[channel];
  }
}

Components A and B, which are not hierarchical, simply import the class (without a provider), subscribe to it during initialization, and use the get method to communicate through their own private channel. I find this approach quite convenient.

Answer 4

Have you ever considered implementing a static EventEmitter that both components can subscribe to?

I came across this idea one day and decided to give it a try in my project. So far, I haven't noticed any issues with it. As the application grows, I'll keep an eye out for any potential drawbacks.

// Here's the "commands dispatcher" class:

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

export class CommandsDispatcherService {
  private static store: { [channel: string]: EventEmitter<any> } = {};

  static get(channel: string): EventEmitter<any> {
    if (!this.store[channel]) {
      this.store[channel] = new EventEmitter();
    }
    return this.store[channel];
  }
}

Components A and B, which are not hierarchical, simply import the class (without a provider), subscribe to it during initialization, and use the get method to communicate through their own private channel. I find this approach quite convenient.

Collaborating on an Angular 2 service among child components that are not contained within the same parent component

Answer №1

Answer №2

Similar questions

Accessing an object key through a variable is possible in the Angular component but not in the HTML

One function in Typescript lodash is missing a default export

Ways to link a Database with an Angular Web App

Issue with arrow function not being invoked in a React TypeScript component's prop inside a function

Having trouble with removing a language from the router in Next.js when using ni18n?

Transform angularjs directive into angular 10

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

Creating an array of custom objects in JavaScript.Initializing custom objects in an

Backend is currently unable to process the request

The build error TS1036 is thrown when a function with a return statement is moved to index.d.ts, even though it worked perfectly in a standard TS file

Chai expect() in Typescript to Validate a Specific Type

How can I make ngFor update after an object has been modified?

The optimal location to declare a constructor in Typescript

Tips for handling dropdowns within a formarray in Angular

"ng2-file-uploader necessitates a browser refresh in order to function

Using RxJS switchMap in combination with toArray allows for seamless transformation

Here is a guide on implementing Hash in URLs with React Router

Revising Angular/RxJS - Restructuring Nested Observables

Using Angular for Sign in with Apple integration

Ways to connect a JSON object with an Angular material form