RouteParams в AppComponent

Question

Я пытаюсь создать однокомпонентное приложение для тестирования Angular2, но я очень зациклен на доступе к RouteParams в своем приложении.

Это то, что я до сих пор:

@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, 
]) 

Поэтому в основном то, что я хочу добиться того, для пользователя, чтобы перейти к http://website.com/?id=21, а затем на веб-сайте для отображения 21. Нужно ли мне иметь отдельный компонент для этого, а затем мой AppComponent предоставляет маршрут к этому компоненту или есть ли способ доступа к параметрам маршрута в компоненте приложения?

Answer 1

Вот как RouteConfig для маршрута параметры

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

Вот код из настроенного приложения, который имеет маршруты и параметры маршрута

@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

В виду вы может видеть изменение маршрута и маршрутизации, отображающих новый контент: click here

Answer 2

Это может делать то, что вы хотите

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