Please enable JavaScript.
Coggle requires JavaScript to display documents.
RouterLink and Navigation, RouterLink Directive - Coggle Diagram
RouterLink and Navigation
Code
navigate.navigateByUrl
NavigateByUrl Method always uses the absolute path
router.navigate
Navigate Method always uses the absolute path unless you provide a starting point.
this._router.navigate(['product']
/ (root node)
./(current node)
../(Parent node)
this._router.navigateByUrl('product')
this._router.navigate(['detail'], { queryParams: { pageNum: this.pageNum + 1 }, relativeTo: this._Activatedroute } );
router.navigate method and relative path
by default it relativeTo: CurrentActivatedRout
fragment
this.router.navigate(['/home'], { fragment: 'top' });
/home#top
fragments refer to the portion of a URL that appears after the '#' symbol
preserveQueryParams
Passes the query parameters of the current route to the next route
this.router.navigate(['/view'], { preserveQueryParams: true });
The landing page any routing shouldn't overwrite the called page routing
queryParamsHandling
The query parameters of the current route are merged with that of the new route if you set queryParamsHandling=”merge”
this.router.navigate(['/view'], { queryParams: { page: 2 },preserveQueryParams: true, queryParamsHandling: "merge" });
preserveFragment
Passes the fragment of the current route to the next navigation. Similar to the preserveQueryParams. The landing page routing shoudn't overwrite the called page fragments
this.router.navigate(['/view'], { preserveFragment: true });
replaceUrl
The current route is removed from the browser history while navigating to the new route. It replaces the current state in history with the new state
this.router.navigate(['/view'], { replaceUrl: true });
reading fragment
this.route.fragment.subscribe()
RouterLink Directive
<a [routerLink]="['product']">Product</a>
RouterLink directive and relative path
relativeTo property:this._Activatedroute by default
QueryParams
<a [routerLink]="['product']" [queryParams]="{ page:2}" }>Page 2</a>
preserveQueryParams
<a [routerLink]="['product']" { preserveQueryParams: "true"}">Page 2</a>
queryParamsHandling
<a [routerLink]="['product']" { queryParams: { page: 2 }, queryParamsHandling: "merge" }">Page 2</a>
Fragment
<a [routerLink]="['product']" { fragment: 'top' }">Page 2</a>
PreserveFragment
<a [routerLink]="['product']" { preserveFragment: true }">Page 2</a>
ReplaceUrl
<a [routerLink]="['product']" { replaceUrl: true">Page 2</a>