Angular2 ottiene l'alias del percorso corrente

Question

Sono in grado di ottenere il percorso del percorso corrente come:/about, /,/news con location.path(). Ma come posso ottenere il suo alias (la parte 'come' nella definizione di una rotta)?

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

È possibile?

Answer 1

non può vedere un modo di ottenerlo, ma un'alternativa è quella di utilizzare RouteData per passare l'alias del percorso

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

Answer 2

Si consiglia di non utilizzare la posizione, invece si dovrebbe usare esempio router.

nel componente, iniettare nel costruttore con:

constructor(public router: Router) 

che, si potrebbe ottenere il nome del componente:

this.router.currentInstruction.component.routeName 

io non sono sicuro di come ottenere come dal router config. Ma direttiva RouterLink dovrebbe essere posto giusto per iniziare con: https://angular.io/docs/ts/latest/api/router/RouterLink-directive.html

Answer 3

Se si conosce la lista dei possibili alias allora è possibile scoprire il nome dell'alias corrente utilizzando una combinazione di router.generate e route.isActiveRoute:

Per esempio, ho una procedura guidata con tre passaggi. Ho un elenco di alias passo in un array:

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

Ho quindi utilizzare il seguente codice per determinare il nome alias corrente:

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

Disclaimer: non ho provato a vedere se questo funziona con i parametri del percorso.

Answer 4

NOTA: quanto segue è stato testato con la serie beta 2.0. Le versioni RC hanno un componente router aggiornato con modifiche di rottura. Il vecchio è stato rinominato in router-deprecated. Questo non è stato ancora testato contro il nuovo router.

Quanto segue verrà stampato Foo o Bar a seconda del percorso attivo.

@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

Per> = Angular2 RC.x (nuovo router)

ci sono alias più nel nuovo router.

è possibile ottenere il percorso relativo della componente locale

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

o il percorso completo utilizzando

constructor(private router:Router) {} 

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

o

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