Angular2 bekomme den Aliasnamen der aktuellen Route

Question

Ich kann den Pfad der aktuellen Route abrufen wie:/about, /,/news mit location.path(). Aber wie kann ich stattdessen seinen Alias ​​bekommen (der 'as' Teil in der Definition einer Route)?

{ path: '/about', as: 'About', component: About } 

Ist es möglich?

Answer 1

kann keinen Weg, um es zu sehen, aber eine Alternative ist Routedata verwenden, um die Aliasnamen der Route sollten

https://angular.io/docs/ts/latest/api/router/RouteData-class.html

Answer 2

Sie nicht Standort verwenden, um passieren, stattdessen sollten Sie Router-Instanz verwenden.

In Ihrer Komponente, injizieren sie in Konstruktor mit:

constructor(public router: Router) 

als Sie Namen der Komponente mit erhalten könnte:

this.router.currentInstruction.component.routeName 

Ich bin nicht sicher, wie Sie als von Router erhalten Konfig. Aber sollte Router Richtlinie richtiger Ort, um zu starten mit: https://angular.io/docs/ts/latest/api/router/RouterLink-directive.html

Answer 3

Wenn Sie die Liste der möglichen Aliase wissen, dann ist es möglich, den Namen des aktuellen Alias, um herauszufinden, eine Kombination aus router.generate und route.isActiveRoute mit:

Für Beispiel: Ich habe einen Assistenten mit drei Schritten. Ich habe eine Liste von Schritt Aliase in einem Array:

private wizardAliases = [ 
    'wizardStep1', 
    'wizardStep2', 
    'wizardStep3' 
]; 

ich dann den folgenden Code verwenden, um die aktuellen Alias-Namen zu ermitteln:

const alias = this.wizardAliases 
    .map(alias => ({ alias, navigationInstruction: this.router.generate([alias]) })) 
    .filter(x => this.router.isRouteActive(x.navigationInstruction)) 
    .map(x => x.alias); 

if (alias.length === 1) { 
    console.log(`alias is ${alias}`); 
} 

Haftungsausschluss: Ich habe nicht, ob das funktioniert, um zu sehen versucht, mit Routenparametern.

Answer 4

HINWEIS: Folgendes wurde mit der Betaversion 2.0 getestet. Die RC-Versionen haben eine aktualisierte Router-Komponente mit brechenden Änderungen. Der alte wurde in router-deprecated umbenannt. Dies wurde noch nicht gegen den neuen Router getestet.

Das Folgende wird Foo oder Bar je nach Ihrer aktiven Route drucken.

@Component({ 
    selector: 'app', 
    templateUrl: 'app/app.html', 
    directives: [ROUTER_DIRECTIVES] 
}) 
@RouteConfig([ 
    {path:'/', name: 'Foo', component: FooComponent, useAsDefault: true}, 
    {path:'/bar', name: 'Bar', component: BarComponent, useAsDefault: false}, 
]) 
export class AppComponent implements OnInit { 
    constructor(private _router: Router) { 
    } 

    ngOnInit() { 
     console.log('current route name', 
        this._router.currentInstruction.component.routeName); 
    } 
} 

Answer 5

Für> = Angular2 RC.x (neuen Router)

Es gibt keine Aliase mehr im neuen Router.

Sie können die relative Route der lokalen Komponente

routerOnActivate(curr:RouteSegment, prev?:RouteSegment, currTree?:RouteTree, prevTree?:RouteTree):void { 
    console.log(curr.stringifiedUrlSegments); 
    } 

oder den vollständigen Pfad

constructor(private router:Router) {} 

    routerOnActivate(curr:RouteSegment, prev?:RouteSegment, currTree?:RouteTree, prevTree?:RouteTree):void { 
    console.log(this.router.serializeUrl(tree)); 
    } 

oder

constructor(router:Router, private location:Location) { 
    router.changes.subscribe(() => { 
    console.log(this.location.path()); 
    }); 
}