How to inject service into class (not component)
I'd like to inject a service into a class that is not a component.
For example:
Myservice
import {Injectable} from '@angular/core';
@Injectable()
export class myService {
dosomething() {
// implementation
}
}
MyClass
import { myService } from './myService'
export class MyClass {
constructor(private myservice:myService) {
}
test() {
this.myservice.dosomething();
}
}
I tried and it doesn't work. It seems like service need to be used in only component or service.
Is there a way to use a service in a normal class? or it's a bad practice to use a service in a normal class.
Thank you.
Solution 1:
Injections only works with classes that are instantiated by Angulars dependency injection (DI).
- You need to
- add
@Injectable()
toMyClass
and - provide
MyClass
likeproviders: [MyClass]
in a component or NgModule.
- add
When you then inject MyClass
somewhere, a MyService
instance gets passed to MyClass
when it is instantiated by DI (before it is injected the first time).
- An alternative approach is to configure a custom injector like
constructor(private injector:Injector) {
let resolvedProviders = ReflectiveInjector.resolve([MyClass]);
let childInjector = ReflectiveInjector.fromResolvedProviders(resolvedProviders, this.injector);
let myClass : MyClass = childInjector.get(MyClass);
}
This way myClass
will be a MyClass
instance, instantiated by Angulars DI, and myService
will be injected to MyClass
when instantiated.
See also Getting dependency from Injector manually inside a directive
- Yet another way is to create the instance yourself:
constructor(ms:myService)
let myClass = new MyClass(ms);
Solution 2:
Not a direct answer to the question, but if you're reading this SO for the reason I am this may help...
Let's say you're using ng2-translate and you really want your User.ts
class to have it. You're immediate thought is to use DI to put it in, you are doing Angular after all. But that's kind of overthinking it, you can just pass it in your constructor, or make it a public variable you set from the component (where you presumably did DI it in).
e.g.:
import { TranslateService } from "ng2-translate";
export class User {
public translateService: TranslateService; // will set from components.
// a bunch of awesome User methods
}
then from some user-related component that injected TranslateService
addEmptyUser() {
let emptyUser = new User("", "");
emptyUser.translateService = this.translateService;
this.users.push(emptyUser);
}
Hopefully this helps those out there like me who were about to write a lot of harder to maintain code because we're too clever sometimes =]
(NOTE: the reason you may want to set a variable instead of making it part of your constructor method is you could have cases where you don't need to use the service, so always being required to pass it in would mean introducing extra imports/code that are never really used)