RouteParams in AppComponent

Question

Ich versuche eine einfache Ein-Komponenten-App zum Testen von Angular2 zu erstellen, aber ich stehe beim Zugriff auf die RouteParams in meiner App-Komponente sehr fest.

Dies ist, was ich bisher:

@Component({ 
    selector: 'app', 
    template: '<h1>ID: {{id}}</h1>', 
    directives: [ROUTER_DIRECTIVES], 
    providers: [] 
}) 
@RouteConfig([ 
    { path: '/', component: App } 
]) 
class App { 
    private id: string 

    constructor(params: RouteParams) { 
    this.id = params.get('id') 
    } 
} 

bootstrap(App, [ 
    ROUTER_PROVIDERS, 
]) 

im Grunde also, was ich erreichen will, ist für den Benutzer http://website.com/?id=21 gehen und dann für die Website 21. Muss ich eine separate haben müssen angezeigt werden Komponente dafür und dann haben meine AppComponent eine Route zu dieser Komponente oder gibt es einen Weg auf die Routenparameter in der App-Komponente zugreifen?

Answer 1

Hier ist, wie für eine Route RouteConfig Parameter

{path: '/hero/:id', name: 'HeroDetail', component: HeroDetailComponent}, 

Hier ist ein Code aus konfiguriert Anwendung, die Routen und Routenparameter hat

@Component({ 
selector: 'my-app', 
template: ` 
<h1 class="title">Component Router</h1> 
<a [routerLink]="['CrisisCenter']">Crisis Center</a> 
<a [routerLink]="['Heroes']">Heroes</a> 
<router-outlet></router-outlet> 
`, 
directives: [ROUTER_DIRECTIVES] 
}) 
@RouteConfig([ 

{ // Crisis Center child route 
path: '/crisis-center/...', 
name: 'CrisisCenter', 
component: CrisisCenterComponent, 
useAsDefault: true 
}, 

{path: '/heroes', name: 'Heroes',  component: HeroListComponent}, 
{path: '/hero/:id', name: 'HeroDetail', component: HeroDetailComponent}, 
{path: '/disaster', name: 'Asteroid', redirectTo: ['CrisisCenter', 'CrisisDetail', {id:3}]} 
]) 
    export class AppComponent { 

constructor(private router: Router) { 
    this.setUpEvents(); 
} 

private setUpEvents(): void { 
    this.router.subscribe((value: any) => this.onNext(value)); 
} 

private onNext(value: any): void { 
    //uncomment to get the stacktrace 
    //throw new Exception(""); 
    console.log(value); 
} 

} 

the plunker for the example

In der Vollansicht Sie kann sehen, wie sich die Route und routeparams ändern und neuen Inhalt anzeigen: click here

Answer 2

Dies könnte tun, was Sie wollen

constructor(private router:Router, private routeSerializer:RouterUrlSerializer, private location:Location) { 
    router.changes.first().subscribe(() => { 
     let urlTree = this.routeSerializer.parse(location.path()); 
     console.log('serializer', urlTree.children(urlTree.root)[0].segment); 
     // or to get the next segment of the path: 
     // console.log('serializer', urlTree.children(urlTree.children(urlTree.root)[0])[0].segment); 
    }); 
    }