Using ActivatedRoute in another service

Question

I would like to use the ActivatedRoute service in another service. However, as part of my service, the ActivatedRoute service scans the main component of the application, and none of the parameters of the route parameters are emitted from the observed. If I instead track route parameters from one component in the same module, the ActivatedRoute service functions as expected.

Here is a simplified version of my catalog and

app/
├──app.module.ts          <- RouterModule Imported Here
├──app.component.ts
|
└──other-module/
   ├──other.module.ts     <- other.service provided here
   ├──other.component.ts  <- ActivatedRoute works as expected
   └──other.service.ts    <- ActivatedRoute watches App component

Here is a simplified version of my routes configuration:

export const routes: Routes = [
  { path: '', component: App },
  { path: 'other/:id', component: Other }
];

Can someone provide some of them on how to properly process and inject services so that I can use the ActivatedRoute service from another service.

Thank.

Answer 1

Angular 2.1.0, ActivatedRoute ( , queryParams params, - ?name=Joe. href= "/questions/211877/how-get-query-params-from-url-in-angular2/1137267#1137267" > /questions/211877/how-get-query-params-from-url-in-angular2/1137267#1137267 .)

EDIT. , - , Params, URL- , :id. Angular, https://github.com/angular/angular/issues/11023 . , , Params, .

user.service.ts

import {Injectable} from "@angular/core";
import {ActivatedRoute} from "@angular/router";

import {Subscription} from "rxjs/Rx";
import {UserModel} from "./shared/user.model";

@Injectable()
export class UserService {
  protected user: UserModel;
  protected subscription: Subscription;

  constructor(protected activatedRoute: ActivatedRoute) {
    this.subscription = this.activatedRoute.queryParams.subscribe(
      (queryParams: any) => {
        if (queryParams.name) {
          this.setUser(queryParams.name);
        }
      }
    )
  }

  setUser(name) {
    this.user = new UserModel(name);
    console.log('Setting user', this.user);
  }

}

user.model.ts

import {Injectable} from "@angular/core";

@Injectable()
export class UserModel {

  constructor(public name: string) {}
}

user.module.ts

import { NgModule } from '@angular/core';
import {UserService} from "./user.service";

@NgModule({
  imports: [
  ],
  declarations: [
  ],
  exports: [
  ],
  providers: [
    UserService
  ]
})
export class UserModule { }

app.component.ts

import { Component } from '@angular/core';
import {UserService} from "./core/user/user.service";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  constructor(
    protected userService: UserService
  ) {
  }
}

Answer 2

. (. https://github.com/angular/angular/issues/12938), , - , .

, , URL- ( ) ,

this.router.navigate([ this.router.url.concat('/relativepath') ]);

,

this.router.navigate(['./relativepath'], {relativeTo: this.activatedRoute}) 

.