What Is Router link?
The Router-link is a directive and it used to link a specific part of your applications.
@Directive({ selector: ':not(a)[routerLink]' })
Let explain the route configuration using the -
{ path: 'user/:id', component: UserDetailComponent
I the above rote configuration, when linking to this user/:id route, you use the RouterLink directive.
If the link is static, you can use the directive as follows.
<a routerLink="/user/id"> See the User detail</a>
If you using dynamic values to generate the router link that you can pass an array of path segments.
You can specify a route parameter like this.
<a [routerLink]="['/user', user.id]">
<span class="text-align">{{ user.id }}</span>{{ user.name }}
</a>
You can set query params and fragment as follows.
<a [routerLink]="['/user/id']" preserveQueryParams preserveFragment>
See the user component
</a>
You can specify optional route parameters like this.
<a [routerLink]="['/user-detail', { id: '102348014' }]">User Detail</a>
And
@Component({
selector: 'app-user',
template: `<nav>
<a [routerLink]="['/users']">User List</a>
<a [routerLink]="['/userDetail/101', { Id: '102348014' }]">User Detail</a>
</nav>
<router-outlet></router-outlet>`,
styleUrls: ['./user.component.css']
})
For
more detail kindly refer the link - https://www.code-sample.com/2018/05/angular-5-6-7-routing-and-navigation.html
|
Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
|