Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 068bc86

Browse files
section 6 - relative navigation added
section 6 - relative navigation added
1 parent 96eb0ea commit 068bc86

File tree

1 file changed

+34
-0
lines changed

1 file changed

+34
-0
lines changed

‎README.md

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -719,3 +719,37 @@ isSelectedRouteMatchOptionalParam(curDepartment) {
719719
</figure>
720720
</p>
721721

722+
6 Relative Navigation
723+
=====================
724+
- `Absolute path` starts with `forward slash /` (paths like `/name` are absolute/fixed path)
725+
- `Absolute/Fixed paths are not flexible` as if file/route name changes we need to make change at all occurrences/places in an application
726+
- Its advisable to use relative path/navigation with `relativeTo` property
727+
728+
> **Syntax & Example**: department-list.component.ts
729+
```ts
730+
/* on department click */
731+
onLinkSelect(curDepartment) {
732+
console.log('onLinkSelect curDepartment');
733+
// navigate ( path, route parameter)
734+
// this.router.navigate(['departments', curDepartment.id]);
735+
736+
// relative path, links parameter array, relativeTo property
737+
this.router.navigate([curDepartment.id], { relativeTo: this.activatedRoute }); // to the current route append the department id and navigate to that URL
738+
}
739+
```
740+
741+
> **Syntax & Example**: department-details.component.ts
742+
```ts
743+
// back button - method to handle optional parameters and show current department highlighted
744+
goToDepartments() {
745+
console.log('goToDepartments clicked');
746+
let currentSelectedId = this.selectedDepartmentId ? this.selectedDepartmentId : null
747+
//sending optional parameter - used for some logic
748+
//this.router.navigate(["/departments", { id: currentSelectedId, test: 'test-param-value' }])
749+
750+
// relative path, links parameter array - {key:value}, {relativeTo property}
751+
// we can pass multiple parameters as per our requirements
752+
// this.router.navigate(['../', { id: currentSelectedId, name: 'Hello' }]);
753+
this.router.navigate(['../', { id: currentSelectedId }], { relativeTo: this.activatedRoute }); // to the current route append the department id and navigate to that URL
754+
}
755+
```

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /