Hierarchical service injectors

Ionic Framework ionic-v3
1

Hi everyone. Sorry for my English.

I need to create ionic2 app with the following project tree:

–MyApp
----Component1
------SubComponent1
------SubComponent2
------SubComponent3
----Component2
------SubComponent1
------SubComponent2
----Component3
------SubComponent1
------SubComponent2

I have some services, that required only subcomponents of Component1.

I can inject services to MyApp. But I don’t need this, because Component2 and Component3 with subcomponents will see this provider.

How can I organize Component1 for this case (to inject service only to Component1 and its subcomponents) ?

2

Just inject services to Component 1 instead of MyApp, it will be visible only to Component 1 and it’s children (or at leas i think so).

3

Thanks for response. I understand that if I inject service in Component1, it will be available only in it’s subcomponents.

But how create Component1 ?

Ionic2 navigation implemented by using navController.push(SomeComponent). And SomeComponent is not a lover level component for component from which I make a navController.push

4

With Ionic/Angular 2 I keep my “services” seperated.

For instance I need a service that will provide some utilities, such as converting a number to a string …
I will create a file called Utils.ts, and put the following content in it:

class Utils {
    static numToString(num : number) : string {
        return num.toString();
    }
}

Then inside any component of my application I will simply import my Utils file
import {Utils} from './services/Utils';

and call the function anywhere within that file
Utils.numToString(myNumber);

5

I would also like to add that the functions inside that class do not have to be static. They can be regular functions too but that will require you to instantiate an instance of the class by calling new Utils().

If your class will have non-static functions then I recommend looking into creating an Angular 2 Injectable although it’s unnecessary and will only save you few lines of code each time you use the service.