web-dev-qa-db-fra.com

Comment naviguer vers un itinéraire frère?

Supposons que j'ai cette configuration de routeur

export const EmployeeRoutes = [
   { path: 'sales', component: SalesComponent },
   { path: 'contacts', component: ContactsComponent }
];

et avez navigué jusqu'au SalesComponent via cette URL

/department/7/employees/45/sales

J'aimerais maintenant aller à contacts, mais comme je n'ai pas tous les paramètres pour un itinéraire absolu (par exemple, l'ID de département, 7 dans l'exemple ci-dessus) Je préférerais y arriver en utilisant un lien relatif, par exemple.

[routerLink]="['../contacts']"

ou

this.router.navigate('../contacts')

qui malheureusement ne fonctionne pas. Il y a peut-être une solution évidente mais je ne la vois pas. Quelqu'un peut-il aider ici s'il vous plaît?

angularangular2-routingangular2-router
49
Thorsten Westheider

Si vous utilisez le nouveau routeur (3.0.0-beta2), vous pouvez utiliser ActivatedRoute pour accéder au chemin relatif comme suit:

constructor(private router: Router, private r:ActivatedRoute) {} 

///
// DOES NOT WORK SEE UPDATE
goToContact() {
  this.router.navigate(["../contacts"], { relativeTo: this.r });
}

Mise à jour 08/02/2019 Angular 7.1.0

current route: /department/7/employees/45/sales

the old version will do: /department/7/employees/45/sales/contacts

Selon le commentaire de @ KCarnaille, ce qui précède ne fonctionne pas avec le dernier routeur. La nouvelle façon est d'ajouter .parent à this.r alors

    // Working(08/02/2019) 
    goToContact() {
       this.router.navigate(["../contacts"], { relativeTo: this.r.parent });
    }

the update will do: /department/7/employees/45/contacts

85
Harry Ninh

La directive RouterLink considère toujours le lien fourni comme un delta par rapport à l'URL actuelle:

[routerLink]="['/absolute']"
[routerLink]="['../../parent']"
[routerLink]="['../sibling']"
[routerLink]="['./child']"     // or
[routerLink]="['child']" 

// with route param     ../sibling;abc=xyz
[routerLink]="['../sibling', {abc: 'xyz'}]"
// with query param and fragment   ../sibling?p1=value1&p2=v2#frag
[routerLink]="['../sibling']" [queryParams]="{p1: 'value', p2: 'v2'}" fragment="frag"

La méthode navigate() requiert un point de départ (c'est-à-dire le paramètre relativeTo). Si aucun n'est fourni, la navigation est absolue:

constructor(private router: Router, private route: ActivatedRoute) {}

this.router.navigate("/absolute/path");
this.router.navigate("../../parent", {relativeTo: this.route});
this.router.navigate("../sibling",   {relativeTo: this.route});
this.router.navigate("./child",      {relativeTo: this.route}); // or
this.router.navigate("child",        {relativeTo: this.route});

// with route param     ../sibling;abc=xyz
this.router.navigate(["../sibling", {abc: 'xyz'}], {relativeTo: this.route});
// with query param and fragment   ../sibling?p1=value1&p2=v2#frag
this.router.navigate("../sibling", {relativeTo: this.route, 
    queryParams: {p1: 'value', p2: 'v2'}, fragment: 'frag'});

// RC.5+: navigate without updating the URL 
this.router.navigate("../sibling", {relativeTo: this.route, skipLocationChange: true});
47
Mark Rajcok