Угловые 2 извлечения параметров url с дочерними маршрутами

Question

Я только учусь использовать Angular 2, и сейчас я работаю с маршрутами. Я пытаюсь получить параметр маршрута, используя дочерние маршруты.

В настоящее время я работаю над приложением, которое может отображать данные пользователей. URL будет выглядеть следующим образом.

LOCALHOST:4200/ пользователь / ID / Детали

Для этого приложения я использую UserComponent и DetailsComponent, который вложен в папку пользователя. И я просто хочу иметь возможность изменить URL-адрес и получить сегмент URL-адреса в моем компоненте.

Я пытаюсь получить URL-адрес, используя ActivatedRoute из '@angular/router' в конструкторе DetailsComponent и назначая его свойству 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();
}
}

Однако параметр не обновляется и отображается в файле шаблона. Этот подход работает, потому что его точный код я использовал в другом компоненте, и мне удалось отобразить идентификатор в файле шаблона. так что все вроде бы на месте. Роутер-розетка находится в нужном месте, и маршруты и дочерние маршруты определены правильно, потому что файл шаблона загружается, он просто не отображает идентификатор из сегмента URL.

Это в основном то, как я представляю себе работу с некоторой базой данных позже, и я просто хочу иметь возможность извлекать этот сегмент для извлечения информации из базы данных позже. Так что я просто не уверен, почему это не работает. Должен ли я использовать 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

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

В деталях HTML шаблон у меня есть

<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: 'user/:id', component: UserComponent, children: USER_ROUTES }

изнутри компонента маршрута

{ path: 'details', component: DetailsComponent }

который не имеет никакого id параметр, но является дочерним элементом маршрута, который имеет этот параметр. Итак, вам нужно получить параметр из родительского маршрута:

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

Answer 2

Напишите это внутри ngOnInit.

this.id = activeRoute.parent.snapshot.params['id'];