I want to use ActivatedRoute to get route params in a service like I would do in a Component. However, when I inject the ActivatedRoute object in a Service it contains an empty params variable
I've created a plunker that reproduces the behaviour: http://plnkr.co/edit/sckmDYnpIlZUbqqB3gli
Note that the intention is to use the parameter in the service and not in the component, the way the plunker is set up is purely to demonstrate the issue.
Component (test
is retrieved):
export class Component implements OnInit {
result: string;
constructor(private route: ActivatedRoute) {
}
ngOnInit() {
this.route.params.subscribe(params => {
this.result = params['test'];
});
}
}
Service (test
is not retrieved):
export class Service {
result: string;
constructor(private route: ActivatedRoute) {
this.getData();
}
getData() {
this.route.params.subscribe(params => {
this.result = params['test'];
});
}
}
Service
here is a singleton that belongs to root injector and is injected with root ActivatedRoute
instance.
Outlets get their own injector and own ActivatedRoute
instance.
The solution here is to let route components have their own Service
instances:
@Component({
...
providers: [Service]
})
export class MainComponent { ... }