Angular 2の子パラメータを使用したURLパラメータの取得

Question

Angular 2の使い方を覚えているだけで、現在ルートを使用しています。私がしようとしているのは、子ルートを使ってルートパラメータを取得することです。

私は現在、ユーザーの詳細を表示できるアプリケーションを開発中です。 URLはこのようになります。

はlocalhost：4200 /ユーザー/ ID /詳細私はUserComponentを使用しています。このアプリケーションとユーザーフォルダ内にネストされているDetailsComponentについては

。そして、私はちょうど私のコンポーネント内のURLを変更してURLセグメントを取得できるようにしたい。

URLを取得しようとしているのは、DetailsComponentのコンストラクタ内で '@ angular/router'のActivatedRouteを使用して、idプロパティに割り当てることです。これは文字列補間を使用してテンプレートで表示します。 DetailsComponentの実際のコードは次のとおりです。

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

@Component({ 
selector: 'app-details', 
templateUrl: './details.component.html', 
styles: [] 
}) 
export class DetailsComponent implements OnInit, OnDestroy { 


id: string; 

private subscription : Subscription; 

constructor(private router: Router, private activatedRoute: ActivatedRoute) { 
    this.subscription = activatedRoute.params.subscribe(
     (param: any) => this.id = param['id'] 
    ); 
} 

ngOnInit() { 
} 

ngOnDestroy() { 
this.subscription.unsubscribe(); 
} 
} 

ただし、パラメータは更新されず、テンプレートファイルに表示されます。このアプローチは、私が別のコンポーネントで使った正確なコードであり、テンプレートファイルにIDを表示できたので機能します。だから全てが正しいと思われる。テンプレートファイルがロードされ、urlセグメントのidが表示されないため、ルータ出口が適切な場所にあり、ルートと子ルートが正しく定義されています。

これは基本的に、後で何らかのデータベースの作業をイメージする方法です。基本的には、そのセグメントをフェッチして後でデータベースから情報を取得できるようにしたいと考えています。だから私はなぜこれが動作していないのか分かりません。これに対してqueryParametersを使用する必要がありますか？それとも、このようにして、かなりのURLを持っているのですか？もしそうなら、私は間違って何をしていますか？ここで

がルート あるこれらのルートはここ

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

import { DetailsComponent } from './details.component'; 
import { EditComponent } from './edit.component'; 

export const USER_ROUTES: Routes = [ 
{ path: 'details', component: DetailsComponent }, 
{ path: 'edit', component: EditComponent } 
]; 

ユーザーディレクトリで定義されているapp.routing.tsは詳細HTMLテンプレートでは

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

import { HomeComponent } from './home/home.component'; 
import { ProductComponent } from './product/product.component'; 
import { ProductsComponent } from './products/products.component'; 
import { UserComponent } from './user/user.component'; 
import { USER_ROUTES } from './user/user.routes'; 

const APP_ROUTES: Routes = [ 
{ path: 'user/:id', component: UserComponent, children: USER_ROUTES }, 
{ path: 'user', component: UserComponent }, 
{ path: 'products/:id', component: ProductsComponent }, 
{ path: 'products', component: ProductComponent }, 
{ path: '', component: HomeComponent } 

]; 

export const routing = RouterModule.forRoot(APP_ROUTES); 

を提出している私は

を持っています

<p>You are currently viewing the details of User number {{ id }}.</p> 

ユーザーhtmlテンプレートでは、私は

を持っています

<p>User Component</p> 
<router-outlet></router-outlet> 

Answer 1

あなたはどんなidパラメータを持っていないルート

{ path: 'details', component: DetailsComponent } 

のコンポーネント内からのルート

{ path: 'user/:id', component: UserComponent, children: USER_ROUTES } 

のパラメータ（id）にアクセスしようとしています、このパラメータを持つルートの子です。だから、親ルートからパラメータを取得する必要があります：

this.subscription = activatedRoute.parent.params.subscribe(
    (param: any) => this.id = param['id'] 
); 

Answer 2

インポート{ルータ、ActivatedRoute、ParamMap}「の角/ルータ@」から。

コンストラクタ（プライベートルート：ActivatedRoute、 プライベートルータ：ルータ）{

LETのID = this.route.snapshot.parent.paramMap.get（ 'ID'）。

}