2017-01-24 20 views
0

親ルートから子ルート(「id」と「タイプ」と呼ばれます)を取得しようとしていますが、未定義です。角2 - 子ルートを取得できません(未定義)

子供CERTS_ROUTES(app.routing.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 } 
]; 

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)以下のコードは "id"または "type"を返すが、未定義を返します。私はfirstChildを取得した場合

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

私は正しい「ID」を取り戻すことができますが、「タイプ」の値が「ID」と同じです。 Iは(スニペット)を使用したコード:

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

Iが正しい「タイプ」の値の正しい「ID」の値とthis.route.children["0"].url.value[1].pathを取り戻すことができthis.route.children["0"].url.value[0].pathを使用します。

コンソールでthis.route.childrenを掘り下げて見つけましたが、正しくはないようですが、より良い/エレガントな方法がありますか?あなたは右のすべてをした

答えて

1

、へのロギング:)

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

変更の期待:

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

私は愚かなような気がします。気づいてくれてありがとう。この質問を削除しても構わないと思いますが、ちょうど恥ずかしいことです。 – ToDo

+0

大したことではありません。すべてのプログラマーはこの種の間違いを何度も繰り返しました。それにかかわらず、もし私があなたを助けてくれたら、私の答えをアップしてください。 ;) –

0

あなたのURLからIDと型パラメータを引き出すためにActivatedRoute.snapshotを使用してみてください。ルートパラメータとクエリパラメータを処理します。

関連する問題