Angular 2.0.2: ActivatedRoute is empty in a Service

Question

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'];
    });
  }
}

Answer 1

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 { ... }

Answer 2

The answer of estus provides a good solution when multiple service instances are not an issue.

The following solution gets a parameter straight from the router and allows the service to have one instance:

export class Service {
  result: string;

  constructor(private router: Router) {
    this.result = router.routerState.snapshot.root.children[0].url[index].path
  }
}

or as an observable:

export class Service {
  result: string;

  constructor(private router: Router) {
    this.router.routerState.root.children[0].url.map((url) => {
      this.result = url[index].path;
    });
  }
}

alternatively, when routerState is not available:

export class Service {
  result: string;

  constructor(private router: Router) {
    this.router.parseUrl(this.router.url).root.children.primary.segments[index].toString();
  }
}

Index is the position of the param in the url.

Answer 3

I came across this issue and the working solution I end with is the following.

@Component({
  selector: 'app-sample',
  styleUrls: [`../sample.component.scss`],
  templateUrl: './sample.component.html',
})
export class AppSampleComponent {
  constructor(private route: ActivatedRoute,
              private someService: SomeService){}
  public callServiceAndProcessRoute(): void {
    this.someService.processRoute(route);
  }
}

@Injectable()
export class SomeService {
  public processRoute(route: ActivatedRoute): void {
  // do stuff with route
  }
}

So you will pass the ActivatedRoute to the service as a param.

Answer 4

I can't see a routerLink directive in your Plunker code you provided.

You need to use a routerLink directive to navigate to your component, where you supply the param, then only you can retrieve it. For example:

<a routerLink="/myparam" >Click here to go to main component</a>