Угловой 2 - Не удается найти дочерний маршрут (неопределенный)

Question

Я пытаюсь восстановить дочерние маршруты (называемые «id» и «type») из родительского маршрута, но он не определен.

Родительские маршруты с детьми 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); 

дети маршруты (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 } 
]; 

Я использую код ниже, чтобы вернуть «id» или «type», но он возвращает 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); 
     } 
    ); 
    } 
} 

Если я извлечь firstChild я могу получить обратно правильный «идентификатор», а значение для «типа» такой же, как «идентификатор». Код я использовал (фрагмент):

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

Использование this.route.children["0"].url.value[0].path я могу получить обратно правильный «ID» значение и this.route.children["0"].url.value[1].path для правильного значения «типа».

Я нашел это, копая this.route.children в консоли, но это не кажется правильным, конечно, есть лучший/элегантный способ?

Answer 1

Вы сделали все правильно, ожидать лесозаготовок :)

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

изменение:

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

Answer 2

ActivatedRoute.snapshot Попробуйте использовать вытягивать идентификаторов и типов параметров из вашего URL. Он будет обрабатывать параметры маршрута и параметры запроса, если вы столкнетесь с ними.