CODEWITHSUNDEEP
angularroutes
ToDo
ToDo

Reputation: 782

Angular 2 - Can't retrieve child route (undefined)

I'm trying to retreive the children routes (called "id" and "type") from the parent route but it is undefined.

The parent routes with children CERTS_ROUTES (app.routing.ts):

import { Routes, RouterModule } from '@angular/router';
import { CERTS_ROUTES } from './certs/certs.routes';

import { CertsComponent } from './certs/certs.component';
import { LoginComponent } from './login/login.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';

const APP_ROUTES: Routes = [
    { path: '', redirectTo: '/certs', pathMatch: 'full' },
    { path: 'login', component: LoginComponent },
    { path: 'certs', component: CertsComponent, children: CERTS_ROUTES },
    { path: '**', component: PageNotFoundComponent }

];

export const routing = RouterModule.forRoot(APP_ROUTES);



The Children routes (certs.routes.ts):

import { Routes } from '@angular/router';

import { CertsComponent } from './certs.component';
import { CertDifficultyComponent } from './cert-difficulty/cert-difficulty.component';
import { CertTitleComponent } from './cert-title/cert-title.component';

export const CERTS_ROUTES: Routes = [
    { path: '', component: CertTitleComponent },
    { path: ':id', component: CertTitleComponent },
    { path: ':type', component: CertTitleComponent },
    { path: ':id/:type', component: CertTitleComponent }
];

I'm using the code below to get back "id" or "type" but it returns undefined. 

import { Component, OnInit } from '@angular/core';
import { Subscription } from 'rxjs/Rx';
import { ActivatedRoute, Router } from '@angular/router';

@Component({
  selector: 'app-cert-item',
  templateUrl: './cert-item.component.html'
})
export class CertItemComponent implements OnInit {

  private subscription: Subscription;

  constructor(
    private route: ActivatedRoute,
    private router: Router
  ) { }

  ngOnInit() {
    this.subscription = this.route.params.subscribe(
      (params: any) => {
        let myId = params['id'];
        let myType = params['type'];
        console.log("ID: ", myId);
        console.log("Type: ", myType);
      }
    );
  }
}

If I retrieve the firstChild I can get back the correct "id" but the value for "type" is the same as "id". The code I used (snippet):

  ngOnInit() {
     this.subscription = this.route.firstChild.params.subscribe(
      (params) => {
        this.catId = params['id'];
        this.diffType = params['type'];
         console.log("Id: ", this.catId);
         console.log("Type: ", this.catId);
      }
    );
  }

Using this.route.children["0"].url.value[0].path I can get back the correct "id" value and this.route.children["0"].url.value[1].path for the correct "type" value.

I found this by digging the this.route.children in the console, but it doesn't seem right, surely there is a better/elegant way?

Upvotes: 1

Views: 1231

Answers (2)

j.k
j.k

Reputation: 463

Try using ActivatedRoute.snapshot to draw out id and type parameters from your url. It will handle route parameters and query parameters if you encounter those as well.

Upvotes: 0

Jaroslaw K.
Jaroslaw K.

Reputation: 5374

You did everything right, expect of logging :) 

console.log("Id: ", this.catId);
console.log("Type: ", this.catId);

change to: 

console.log("Id: ", this.catId);
console.log("Type: ", this.diffType);

Upvotes: 1

Related Questions