web-dev-qa-db-fra.com

Angular2 obtenir l'alias de la route actuelle

Je peux obtenir le chemin de la route actuelle comme:/about, /,/news avec location.path () . Mais comment puis-je obtenir son alias (la partie 'en tant que' dans la définition d'une route)?

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

C'est possible?

angularangular2-routing
13
Pietrzm

NOTE: Ce qui suit a été testé avec la série 2.0 beta. Les versions RC ont un composant de routeur mis à jour avec des modifications radicales. L'ancien a été renommé en router-deprecated. Cela n'a pas encore été testé contre le nouveau routeur.

Ce qui suit imprimera Foo ou Bar en fonction de votre itinéraire actif.

@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);
    }
}
3
konrad

Vous ne devez pas utiliser l'emplacement, mais plutôt utiliser l'instance de routeur. 

Dans votre composant, injectez-le dans le constructeur avec:

constructor(public router: Router)

que, vous pouvez obtenir le nom du composant avec:

this.router.currentInstruction.component.routeName

Je ne sais pas comment vous obtenez as à partir de la configuration du routeur. Mais la directive RouterLink devrait être le bon endroit pour commencer avec: https://angular.io/docs/ts/latest/api/router/RouterLink-directive.html

2
Vlado Tesanovic

Impossible de trouver un moyen de l'obtenir, mais une alternative consiste à utiliser RouteData pour transmettre l'alias de la route.

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

2
Peter M

Pour> = Angular2 RC.x (nouveau routeur)

Il n'y a plus d'alias dans le nouveau routeur.

Vous pouvez obtenir la route relative de la composante locale 

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

ou le chemin complet en utilisant

constructor(private router:Router) {}

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

ou 

constructor(router:Router, private location:Location) {
  router.changes.subscribe(() => {
    console.log(this.location.path());
  });
}
1
Günter Zöchbauer

Si vous connaissez la liste des alias possibles, il est possible de connaître le nom de l'alias actuel en utilisant une combinaison de router.generate et route.isActiveRoute:

Par exemple, j'ai un assistant avec trois étapes. J'ai une liste d'alias d'étape dans un tableau:

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

J'utilise ensuite le code suivant pour déterminer le nom d'alias actuel:

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: Je n'ai pas essayé de voir si cela fonctionnait avec les paramètres de route.

0
Wayne Maurer