类的公共方法在TypeScript / Angular中不可见

Question

I have a typescript class as below:

import { Injectable } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';

@Injectable()
export class RouteParamsService {
  public router : ActivatedRoute;

  constructor(){};

  public getRouteParams(){
      return this.router;
  }

}

I am using it in my component as below:

import { ListItem } from "../../../shared/models/listItem.model";
    import { RouteParamsService } from '../../../shared/services/routeParams.service';

    export class CheckGroupsFilterValues {
        private route = new RouteParamsService();
        public rgr: string[] = []; //responsibilityGroups
        public sys: string[] = []; //systems
        public app: string[] = []; //applications
        public cgr: string[] = []; //checkGroups
        public cgi: string[] = []; //checkGroupInstances
        public nat: string; //needsAttentions

        constructor(){
            this.rgr = ["MULTI_MULTI_Vale_Sellout (4213)"];
            this.sys = ["MULTI_MULTI_Vale_Sellout (4213)"];
            this.app = ["MULTI_MULTI_Vale_Sellout (4213)"];
            this.cgr = ["MULTI_MULTI_Vale_Sellout (4213)"];
            this.cgi = ["MULTI_MULTI_Vale_Sellout (4213)"];

            console.log(this.route);
        }

    }

The problem is: console.log(this.route) gives the following output, RouteParamsService {} . The public method getRouteParams() defined in the class is not visible at all even though I have created an instance already.

Answer 1

There is more than one wrong things here.

1- The router of RouteParamsService will always be undefined as it is not being assigned anywhere. In needs to be in constructor in onder to be injected properly.

constructor(public router : ActivatedRoute){};

2- private route = new RouteParamsService(); does not create an Angular service. In order to inject ActivatedRoute in the constructor of service, either it needs to be an Angular service (injectable) or you have to manually do it. So, if you create the service with new , you have to pass ActivatedRoute to service manually.

You can use Injector ( https://angular.io/api/core/Injector ) to manually inject injectables in your custom classes.

UPDATE

In order to inject an Angular injectable to a custom class, you can use Injector .

First, export an instance of Injector from a feature module (in order to avoid circular dependencies) and import the feature module in your app module

export let InjectorInstance: Injector;

@NgModule(
 /* *** */
)
export class MyFeatureModule {
  constructor(private injector: Injector) {
    InjectorInstance = this.injector;
  }
}

-----

@NgModule(
     imports: [
       ...,
       MyFeatureModule,
       ...
     ]
)
export class AppModule {}

Then in your custom class, import InjectorInstance from the feature module and use it to get injectable reference:

import {InjectorInstance} from 'path/to/my-feature-module.module';

export class CheckGroupsFilterValues {
   private route = InjectorInstance.get<RouteParamsService>(RouteParamsService);
};

And don't forget to provide your service in root

@Injectable({
  providedIn: 'root'
})
export class RouteParamsService {...}

Answer 2

You need to pass the router through constructor

constructor(
    private _route: ActivatedRoute, // <-- Usefull
    private _router: Router,
  ){}

https://angular.io/guide/router