OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Does Injector create a new instance of the service with ActivatedRoute

  • Thread starter Thread starter Owen Kelvin
  • Start date Start date
O

Owen Kelvin

Guest

Background​


I am using inheritance in Angular, the major issue was that I initially had to pass services from parent to child, something like

Code:
  // Parent
  export class ParentComponent {
   protected myService: MyService;
   constructor(private myService: MyService) {
   }
  }
  // Child
  export class ChildComponent extends ParentComponent {
  
   constructor(private myService: MyService) {
    super(myService);
   }
  }

To avoid this I found a different approach using Injector from @angular/core. In this approach we follow the below steps

Create a service

app-injector-service.ts

Code:
import { Injector } from '@angular/core';

export class AppInjectorService {
  private static injector: Injector;

  static setInjector(injector: Injector) {
    AppInjectorService.injector = injector;
  }
  static getInjector(): Injector {
    return AppInjectorService.injector;
  }
}

in the main.ts file

Code:
platformBrowserDynamic()
  .bootstrapModule(AppModule)
  .then((ref) => {
    AppInjectorService.setInjector(ref.injector);
  })
  .catch((err) => console.error(err));

and parent class file would look like

Code:
export abstract class ParentComponent {
  protected myService: MyService;
  constructor() {
    const injector = AppInjectorService.getInjector();
    this.myService = injector.get(MyService);
  }
}

With this approach, no need to pass service to the super call! Amazing

My Issue​


The approach above worked very well untill I needed to extract the route param from the activated route so I followed the same structure. To my surprise It is not working. I tested with manually injecting the ActivatedRoute in the child class and the parameter exists. I dont understand why the parameter is not available in the class when we inject ActivatedRoute using the AppInjector. Ofcourse I can go back to injecting it in the child class then passing it to the super function so that it can be accessed by the Parent class but this is what I was trying to avoid...

Below is a stackblitz demo showing the issue, click on the route and you will notice that we get back null from the ActivatedRoute injected in the parent class but a value in the ActivatedRoute in the child class. Basically I am trying to find if there is anything am doing wrong or is there something am missing while using the Injector

Demo

<h2>Background</h2>
<p>I am using inheritance in Angular, the major issue was that I initially had to pass services from parent to child, something like</p>
<pre class="lang-js prettyprint-override"><code> // Parent
export class ParentComponent {
protected myService: MyService;
constructor(private myService: MyService) {
}
}
// Child
export class ChildComponent extends ParentComponent {

constructor(private myService: MyService) {
super(myService);
}
}

</code></pre>
<p>To avoid this I found a different approach using <code>Injector</code> from <code>@angular/core</code>. In this approach we follow the below steps</p>
<p>Create a service</p>
<p>app-injector-service.ts</p>
<pre class="lang-js prettyprint-override"><code>import { Injector } from '@angular/core';

export class AppInjectorService {
private static injector: Injector;

static setInjector(injector: Injector) {
AppInjectorService.injector = injector;
}
static getInjector(): Injector {
return AppInjectorService.injector;
}
}

</code></pre>
<p>in the main.ts file</p>
<pre class="lang-js prettyprint-override"><code>platformBrowserDynamic()
.bootstrapModule(AppModule)
.then((ref) => {
AppInjectorService.setInjector(ref.injector);
})
.catch((err) => console.error(err));
</code></pre>
<p>and parent class file would look like</p>
<pre class="lang-js prettyprint-override"><code>export abstract class ParentComponent {
protected myService: MyService;
constructor() {
const injector = AppInjectorService.getInjector();
this.myService = injector.get(MyService);
}
}

</code></pre>
<p>With this approach, no need to pass service to the super call! Amazing</p>
<h2>My Issue</h2>
<p>The approach above worked very well untill I needed to extract the route param from the activated route so I followed the same structure. To my surprise It is not working. I tested with manually injecting the <code>ActivatedRoute</code> in the child class and the parameter exists. I dont understand why the parameter is not available in the class when we inject <code>ActivatedRoute</code> using the <code>AppInjector</code>. Ofcourse I can go back to injecting it in the child class then passing it to the super function so that it can be accessed by the Parent class but this is what I was trying to avoid...</p>
<p>Below is a stackblitz demo showing the issue, click on the route and you will notice that we get back <code>null</code> from the ActivatedRoute injected in the parent class but a value in the ActivatedRoute in the child class. Basically I am trying to find if there is anything am doing wrong or is there something am missing while using the Injector</p>
<p><a href="https://stackblitz.com/edit/angular...mponent.ts,src/app/child/child.component.html" rel="nofollow noreferrer"><strong>Demo</strong></a></p>
 

Latest posts

H
Replies
0
Views
1
hohohohoho
H
Top