web-dev-qa-db-fra.com

Liens relatifs/routes partielles avec routerLink

Dans mon application, certaines URL prennent la forme

/department/:dep/employee/:emp/contacts

Dans ma barre latérale, je montre une liste de tous les employés, chacun ayant un [routerLink] qui renvoie aux contacts de cet employé.

<ul>
    <li>
        <a [routerLink]="['/department', 1, 'employee', 1, 'contacts']"></a>
    <li>
    <li>
        <a [routerLink]="['/department', 1, 'employee', 2, 'contacts']"></a>
    <li>
    ...
</ul>

Cependant, avec cette approche, je dois toujours fournir le chemin complet, y compris tous les paramètres (comme dep dans l'exemple ci-dessus), ce qui est assez fastidieux. Existe-t-il un moyen de ne fournir qu’une partie de la route, par exemple

<a [routerLink]="['employee', 2, 'contacts']"></a>

(sans la partie department, parce que je ne me soucie pas vraiment de department de ce point de vue et j’ai le sentiment que cela va à l’encontre de la séparation des préoccupations)?

angularangular2-routing
19
Thorsten Westheider

C'est censé fonctionner. Le / en tête en fait un itinéraire absolu. Sans lui (ou avec ./), il devient un itinéraire relatif par rapport à l'itinéraire actuel. Vous pouvez également utiliser ../ (ou ../../ ou plus) pour effectuer un routage relatif au parent ou au parent parent.

26
Günter Zöchbauer

Je ne sais pas si vous pouvez le faire avec [routerLink] mais vous pouvez le faire comme alors ..
Vue

<ul>
    <li>
        <a (click)="onViewDetails(id)">Details</a>
    <li>
    ...

Composant

construct( private router: Router, private route: ActivatedRoute ){
}
onViewDetails(id){
 this.router.navigate([id], {relativeTo: this.route});
}

/employé 
/ employee /: id

4
Ervin Llojku

Au lieu d'utiliser './' ou '../', je suggérerais d'utiliser relativeTo param dans la fonction router.navigate. Par exemple.: 

this.router.navigate(['child'], {relativeTo: this.route});

ou 

this.router.navigate(['sibling'], {relativeTo: this.route.parent});
0
Terry Lam