/TypeScript/How-do-i-navigate-to-a-parent-route-from-a-child-route

How-do-i-navigate-to-a-parent-route-from-a-child-route

// via router link
// The RouterLink directive always treats the provided link as a delta to the current URL:

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

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


// via router
// The navigate() method requires a starting point (i.e., the relativeTo parameter). If none is provided, the navigation is absolute:
...
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     ../../parent;abc=xyz
this.router.navigate(["../../parent", {abc: 'xyz'}], {relativeTo: this.route});
// with query param and fragment   ../../parent?p1=value1&p2=v2#frag
this.router.navigate(["../../parent"], {relativeTo: this.route, 
    queryParams: {p1: 'value', p2: 'v2'}, fragment: 'frag'});

// navigate without updating the URL 
this.router.navigate(["../../parent"], {relativeTo: this.route, skipLocationChange: true});

Source: stackoverflow.com

Similar codes

0 vote186 views1 answer
Based on previous make validation for required in reactive forms
TypeScript
0 vote179 views1 answer
Terminal prompts disabled
TypeScript
0 vote229 views1 answer
Failed to find '~@nativescript/theme/css/core.css'
TypeScript
1 vote262 views1 answer
Create jwt token typescript
TypeScript
26 votes250 views3 answers
Create react app template typescript
TypeScript
0 vote180 views1 answer
They Take Their Medication Then The Device Owner Lets Them Press The Button | The Problem We Are Solving Is Kids Not Taking Their Medication Which Turns To Great Health Benefits In The Young Generation
TypeScript
0 vote202 views2 answers
Setstate do not update emidiatly
TypeScript
0 vote190 views1 answer
Update multiple documents with different field value by id set. Mongoose
TypeScript
1 vote188 views1 answer
Vue typescript extend component option
TypeScript
7 votes198 views2 answers
Axios typescript
TypeScript