Angular 2 ruft URL-Parameter mit Child-Routen ab

Question

Ich lerne gerade, wie ich Angular 2 benutze, und arbeite gerade mit Routen. Ich versuche einen Route-Parameter mit Child-Routen zu holen.

Ich arbeite derzeit an einer Anwendung, die Benutzerdetails anzeigen kann. Die URL würde so aussehen.

localhost: 4200/user/id/Details

Für diese Anwendung ich eine UserComponent und DetailsComponent bin mit, die im Benutzerordner verschachtelt ist. Und ich möchte nur in der Lage sein, die URL zu ändern und das URL-Segment in meiner Komponente abzurufen.

Was ich tun, um zu versuchen, die URL abrufen, ist die ActivatedRoute von '@ Angular/Router' im Konstruktor der DetailsComponent und Zuweisen der ID-Eigenschaft, die ich Zeichenfolge-Interpolation verwenden, um es in der Vorlage anzuzeigen . Hier ist der eigentliche Code aus dem 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(); 
} 
} 

jedoch der Parameter nicht aktualisiert wird und in der Template-Datei angezeigt. Dieser Ansatz funktioniert, da der genaue Code in einer anderen Komponente verwendet wurde und ich die ID in der Vorlagendatei anzeigen konnte. also scheint alles an seinem Platz zu sein. Der Router-Outlet ist an der richtigen Stelle, und die Routen und untergeordneten Routen sind korrekt definiert, da die Vorlagendatei geladen wird. Sie zeigt einfach nicht die ID aus dem URL-Segment an.

Dies ist im Grunde, wie ich Bild arbeiten mit einer Datenbank von irgendeiner Art später, und ich möchte im Grunde nur in der Lage, um dieses Segment holen Informationen aus einer Datenbank später abrufen. Ich bin mir also nicht sicher, warum das nicht funktioniert. Soll ich hierfür queryParameters verwenden? Oder ist es in Ordnung, so eine schöne URL zu haben? und wenn ja, was mache ich falsch?

ist hier die Routen Diese Routen im Benutzerverzeichnis hier die app.routing.ts sind

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

Datei

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

im Detail HTML-Template definiert Ich habe

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

In der Benutzer-HTML-Vorlage habe ich

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

Answer 1

Sie versuchen, einen Parameter zuzugreifen (id) der Route

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

aus dem Inneren der Komponente der Route

{ path: 'details', component: DetailsComponent } 

die keine id Parameter hat, aber ist das Kind der Route, die diesen Parameter hat.So müssen Sie die Parameter von der übergeordneten Route erhalten:

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

Answer 2

Import {Router, ActivatedRoute, ParamMap} von '@ Winkel/Router';

Konstruktor (privat Route: ActivatedRoute, privaten Router: Router) {

let id = this.route.snapshot.parent.paramMap.get ('id');

}