Problem with Angular 4 Routes and Ionic UI

[josesaranda]

I have a problem when im trying to obtain params from Angular 4 Routes.
Im using:

constructor(public route : ActivatedRoute) {
   }

  ngOnInit() {
    var param = this.route.snapshot.paramMap.get(':idEmployer');

    console.log(param);
  }

According to the Angular Routes guide that is how to obtain params, but it show null.
What am I doing wrong?

Thanks!

[sinedied]

You do not need the : prefix when trying to retrieve the route params, see https://angular.io/tutorial/toh-pt5#extract-the-id-route-parameter.

The route.snapshot property is set only when the component was created, and depending on how you use the router it will not be updated on changes, so in this case you need to subscribe to the route to get the params, see https://angular-2-training-book.rangle.io/handout/routing/routeparams.html.

[josesaranda]

Sorry I made a mistake in the before post. I use:

constructor(public route : ActivatedRoute) {
   }

  ngOnInit() {
    var param = this.route.snapshot.paramMap.get(':idEmployer');

    console.log(param);
  }

without : prefix.

Thanks again.

[sinedied]

Can you post your route definition?

The problem can be either in your definition or because the route params is set after the component creation, in which case you need to subscribe to route update like specified here: https://angular-2-training-book.rangle.io/handout/routing/routeparams.html (see "Reading Route Parameters" section).

[sinedied]

Do you still have issues with this?

[josesaranda]

Sorry for the delay, the answer is yes. I have the same issue yet but I solve this according to the following code:

import { EmployersComponent } from './employers.component';
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { Route } from '../core/route.service';
import { extract } from '../core/i18n.service';
import { EmployerComponent } from '../employer/employer.component';
import { EmployerAddComponent } from '../employer-add/employer-add.component';

const routes: Routes = Route.withShell([
  { path: '', redirectTo: '/employers', pathMatch: 'full' },
  { path: 'employers', component: EmployersComponent, data: { title: extract('Employers')}},
  { path: 'employers/add', component: EmployerAddComponent, data: { title: 'Nueva empresa'}},
  { path: 'employers/:id', component: EmployerComponent, data: { title: 'Empresa'}}
]);

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class EmployersRoutingModule { }

employers-routing.module.ts

import { Component, OnInit } from '@angular/core';
import { EmployerProvider } from '../core/providers/employer/employer';
import { Router } from '@angular/router';

@Component({
  selector: 'app-employers',
  templateUrl: './employers.component.html',
  styleUrls: ['./employers.component.scss']
})
export class EmployersComponent implements OnInit {

  employers : any;
  employersFound : any;

  constructor(
    private employerProvider : EmployerProvider,
    private router : Router){ }

  ngOnInit() {
    this.employerProvider.all().subscribe(employers =>{
      this.employers = employers;
      this.employersFound = this.employers;
    });
  }

...

  onClickEmployer(id : number){
    this.router.navigate(['/employers',id]);
  }
}

employers.component.ts

import { EmployerProvider } from './../core/providers/employer/employer';
import { ShellComponent } from './../core/shell/shell.component';
import { ActivatedRoute, ParamMap, Params, Router, RoutesRecognized } from '@angular/router';
import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { NavParams, Nav } from 'ionic-angular';
import { Navigation } from 'selenium-webdriver';
import { ToastController } from 'ionic-angular/components/toast/toast-controller';
import { LoadingController } from 'ionic-angular/components/loading/loading-controller';

@Component({
  selector: 'app-employer',
  templateUrl: './employer.component.html',
  styleUrls: ['./employer.component.scss']
})
export class EmployerComponent implements OnInit {

...

  constructor(
    private shell : ShellComponent,
    private router : Router,
    private employerProvider : EmployerProvider,
    private loadingController : LoadingController,
    private toastController : ToastController) {
  
  }

  onClickBack(){
    this.router.navigate(['/employers']);
  }

  ngOnInit() {
    let id = this.shell.getRouteParams().id; //this method was created by me
    if(isNaN(id)){
      this.onClickBack();
    }else{
      this.getEmployer(id);
    }
  }

...
}

employer.component.ts

@Component({
  selector: 'app-shell',
  templateUrl: './shell.component.html',
  styleUrls: ['./shell.component.scss']
})
export class ShellComponent implements OnInit {

...

  public getRouteParams(){
    return this.routeParams;
  }
}

shell.component.ts

From this way I have get to obtain the id param. I can't to obtain these params according to the documentation.

Thanks for your help.

[sinedied]

Thanks for the feedback and sharing your solution!

Seems like a bug on the angular router (it would not be the first one 😉 ), you should try opening an issue on the angular repo as it seems to be a pretty nominal use-case for me, and yes according to the docs it should work from what you're sharing.

I'm closing the issue since it does not seems to be specific to the generator but rather to the angular router.

[lgadola]

Hi
Same problem here.
Tried to implement routing with parameters in an ngx project. The project was defined as Ionic.
Implemented everything according to Angular doc https://angular.io/guide/router.
Added a route like so { path: 'somepath/:id', component: SomeComponent }]

Navigation: this.router.navigate(['/somepath', '123456' ]);

Tried this in SomeComponent according to docs:
constructor(private route:ActivatedRoute){ this.route.paramMap.subscribe(x=>console.log(x.keys)); }

I was unable to fetch the id parameter. Params are always empty.
The parameter is present in the url (somepath/123456)

Had a look ad idroxen's workaround, but routeParams is not defined in ShellComponent...??

[josesaranda]

I solved that on this way:

@Component({
  selector: 'app-shell',
  templateUrl: './shell.component.html',
  styleUrls: ['./shell.component.scss']
})
export class ShellComponent implements OnInit {

  private routeSnapshot : ActivatedRouteSnapshot;
...
  private updateNav(route: ActivatedRoute) {
    if (!route || !route.firstChild) {
      return;
    }
    // First component should always be IonicApp
    route = route.firstChild;
    if (route && route.component === ShellComponent && route.firstChild) {
      // Loop needed for lazy-loaded routes, see: https://github.com/angular/angular/issues/19420
      while (route.firstChild) {
        route = route.firstChild;
      }

      this.routeSnapshot = route.snapshot;
      this.navRoot = <Component>route.component;
    }
  }

  public getRouteSnapshot() : ActivatedRouteSnapshot{
    return this.routeSnapshot;
  }

shell.component.ts

How I used it:

@Component({
  selector: 'app-my-awesome-component',
  templateUrl: './my-awesome-component.component.html',
  styleUrls: ['./my-awesome-component.component.scss']
})
export class MyAwesomeComponent implements OnInit {
  ...
  contructor(private shell : ShellComponent){
    let params = this.shell.getRouteSnapshot().params;
  }
  ...

my-awesome-componet.component.ts

I hope it helps you

[josesaranda]

In your case you should use this.shell.getRouteSnapshot().paramMap.subscribe(x=> console.log(x));

[lgadola]

Thanks, idroxen.
This helped!

[lgadola]

Finally solved this by putting
<router-outlet></router-outlet>
in both pages, calling and called.
Now, the parameters get passed down.
Maybe this should be included in ngx-rocket globally???

Hope this helps anyone stumbling over it.

[sinedied]

Using <router-outlet></router-outlet> breaks ionic routing in some other ways (for ex animations and history if I remember well). After Ionic 4 migration though, those issues should go away since they're tied to Ionic specifc way of handling routing in v3.