Angular4
Routing, Guards
Routing
<base href>Most routing applications should add a <base> element to the index.html as the first child in the <head> tag to tell the router how to compose navigation URLs.
Router imports
The Angular Router is an optional service that presents a particular component view for a given URL. It is not part of the Angular core. It is in its own library package, @angular/router. Import what you need from it as you would from any other Angular package.
import { RouterModule, Routes } from '@angular/router';Routing
Configuration
Routing
Router outlet
Given this configuration, when the browser URL for this application becomes /heroes, the router matches that URL to the route path /heroes and displays the HeroListComponent after a RouterOutlet that you've placed in the host view's HTML.
<router-outlet></router-outlet>
<!-- Routed views go here -->Routing
Router links
The RouterLink directives on the anchor tags give the router control over those elements. The navigation paths are fixed, so you can assign a string to the routerLink (a "one-time" binding).
Routing
Router Directives
<a routerLink="/user/bob" routerLinkActive="class1 class2">Bob</a><a routerLink="/user/bob"
routerLinkActive="active-link"
[routerLinkActiveOptions]="{exact:true}">
Bob
</a>You can configure RouterLinkActive by passing exact: true. This will add the classes only when the url matches the link exactly.
Angular4
By Oleg Rovenskyi
Angular4
Routing, Guards
