2016-06-01 31 views
4

In Angular 2 möchte ich zwei Routen definieren, die die gleiche Komponente verwenden, aber eine Route ist ein Sonderfall, der einen speziellen Preset-Parameter verwendet. Nun, was ich tun möchte, ist sein:Angular2 zwei Routen zu einer Komponente?

@RouteConfig([ 
    { path: '/', name: 'Home', component: HomeComponent }, 
    { path: '/user/:id', name: 'User', component: UserComponent }, 
    { path: '/special-user', name: 'User', component: UserComponent, params:{'userId':'123'} }, 
]) 

Das, was ich brauche, ist "params" in der letzten Route-Definition zu "/ special-user". Ist das überhaupt möglich?

Edit: im Pfad/user /: id ist die ID Teil der URL, aber in dem Sonderbenutzer Fall würde ich für die ID wie unsichtbar zu sein und nicht Teil der URL

seine

Antwort

3

ich die Antwort in diesem Artikel gefunden haben:

https://auth0.com/blog/2016/01/25/angular-2-series-part-4-component-router-in-depth/1

configure die Route

@RouteConfig([ 
    { path: '/myroute', component: MyComponent, name: 'MyRoute', data: { isAdmin: true } } 
]) 

innerhalb der Komponente:

import {RouteData} from 'angular2/router'; 

export class MyComponent { 
    isAdmin: boolean; 

    constructor(data: RouteData) { 
    this.isAdmin = data.get('isAdmin'); 
    } 
} 
+1

enthalten PS: - Es gibt keinen 'Namen' mehr bei der Verwendung von Routing in angular2 RC –

+0

Für ** Angular2 Release ** benötigen Sie anstelle von' RouteData' 'ActivatedRoute'. Der Konstruktor würde also so aussehen: 'Konstruktor (data: ActivatedRoute) {this.isAdmin = !! data.snapshot.data ['isAdmin']; } '. Ich empfehle, die !! als ein Trick, um alles (einschließlich undefined) in Boolean umzuwandeln –

6

Angular 2 Beta.x

definieren Route als

@RouteConfig([ 
    ... 
    { path: '/special-user/:userId', name: 'SpecUser', component: UserComponent} 
]) 

Verwenden

innen template

[routerLink]="['SpecUser', {userId:123}]" 

innen Komponente

export class SomeComponent { 
    constructor(private router: Router) {} 

    someMethod() { 
    this.router.navigate(['SpecUser', {userId:123}]); 
    } 
} 

Angular 2 RC

definieren Route als

@Routes([ 
    ... 
    { path: '/special-user/:userId', component: UserComponent} 
]) 

Verwendung

innen Vorlage

[routerLink]="['/special-user', 123]" 

innerhalb Komponente

export class SomeComponent { 
    constructor(private router: Router) {} 

    someMethod() { 
    this.router.navigate(['/special-user', 123]); 
    } 
} 
+0

Vielen Dank für Ihre Antwort! Gibt es eine Möglichkeit, dass die URL "www.example.com/special-user" die Benutzer-ID 123 verwendet, ohne sie in der URL anzugeben, sondern im Controller. Ich möchte, dass die URL ohne die ID als get-Parameter schön ist –

Verwandte Themen