The Route specify the mapping of specific route. It consist of path of the route and respective component against that path need to be load when route is selected. It have other properties to as well. The Router object parses and builds the final URL using the Route.
1 export declare interface Route {
2 path?: string;
3 pathMatch?: string;
4 matcher?: UrlMatcher;
5 component?: Type<any>;
6 redirectTo?: string;
7 outlet?: string;
8 canActivate?: any[];
9 canActivateChild?: any[];
10 canDeactivate?: any[];
11 canLoad?: any[];
12 data?: Data;
13 resolve?: ResolveData;
14 children?: Routes;
15 loadChildren?: LoadChildren;
16 runGuardsAndResolvers?: RunGuardsAndResolvers;
17 }
In the above example, a Route interface includes multiple properties which can be specified while registering a routes for the application. Each property represents a specific purpose for route and child route.
1 { path: 'child', component: ChildComponent }
In the above example, a Route object is created by specifying two properties path and component. A path represents a url and component represents a component to be render when path opened on browser.
Example
1 import { NgModule } from '@angular/core';
2 import { RouterModule, Routes } from '@angular/router';
3 import { ChildComponent } from './components/child.component';
4
5 const routes: Routes = [
6 { path: 'child', component: ChildComponent }
7 ];
8
9 @NgModule({
10 imports: [RouterModule.forRoot(routes)],
11 exports: [RouterModule]
12 })
13 export class AppRoutingModule { }
14
In the above example, a Routes array is created by specifying a json object that includes two parameters path and component. When a specified path entered on browser, a respective component will be render on browser. A routes array is registered in the module and exported which will be imported in app.module.ts.
1 import { Component } from "@angular/core";
2 import { Router } from "@angular/router";
3
4 @Component({
5 selector: 'app-root',
6 templateUrl: './app.component.html',
7 styleUrls: ['./app.component.less']
8 })
9
10 export class AppComponent {
11
12
13 constructor(private router: Router) { }
14
15 navigate() {
16 this.router.navigate(['child']);
17 }
18
19 navigateByUrl() {
20 this.router.navigateByUrl('/child');
21 }
22 }
In the above example, a Router object is injected in App.component in the constructor. A navigate() method call navigate() method that takes array of routes. If specified array includes multiple elements, it represents a nested routes. It navigates to specified routes and respective component will be render on browser. A navigateByUrl() navigates to specified url.
1 <h1> Angular routing </h1>
2
3 <a href="#" (click)="navigate()"> Open child component </a>
4
5 <router-outlet></router-outlet>
In the above template, a link element is added that bind with click event. When user click on link, it navigate to specified route. An element router-outlet specify a position where a routed component will be render on browser.
Related options for your search