Basic knowledge
1.<base href>
Most applications with routing need to add a <base> element under the <head> tag.
2. Import the routing library
import { ROUTER_DIRECTIVES } from '@angular/router';
3. Configuration
The preferred solution is to start this application with a provideRouter factory function ([provideRouter(routes)]) with "router array".
import { provideRouter, RouterConfig } from '@angular/router';
const routes: RouterConfig = [
{ path: 'crisis-center', component: CrisisCenterComponent },
{ path: 'heroes', component: HeroListComponent },
{ path: 'hero/:id', component: HeroDetailComponent },
{ path: '**', component: PageNotFoundComponent }
];
export const appRouterProviders = [
provideRouter(routes)
];
RouterConfig is a routing array that determines how to navigate. Each Route maps the path of a URL to a component.
path cannot start with slashes/. The router will parse and generate URLs for us.
The id in the third route is a token of a routing parameter.
The ** in the fourth route represents that the route is a wildcard path. If we cannot match any paths we have configured, the router will match this one, similar to the default in the switch. This feature is very useful when a 404 page needs to be displayed.
We pass the configured routes array to the provideRouter() function, which returns a configured Router service provider
Finally, export this provider through the appRouterProviders array to simply register router dependencies in it.
Register the router's provider in the bootstrap function in .
// main entry point
import { bootstrap } from '@angular/platform-browser-dynamic';
import { AppComponent } from './';
import { appRouterProviders } from './';
bootstrap(AppComponent, [
appRouterProviders
])
.catch(err => (err));
4.<router-outlet>
After the above configuration is completed, when the URL becomes /heroes, the router will match the Route with path heroes, and display the HeroListComponent component in the <router-outlet> in the host view.
5.[routerLink]
We have added the routerLink directive to the <a> tag, which can be bound to the path value in our route at one time.
If routerLink wants to bind dynamic information, we can bind it to a template expression that can return the route link array. The router will eventually parse this array into a URL and a component view.
We can also add a routerLinkActive directive to <a> to add or remove CSS classes when the relevant routerLink is activated. This directive can be added directly to the element or directly to its parent element.
AppComponent Template
template: ` <h1>Component Router</h1> <nav> <a routerLink="/crisis-center" routerLinkActive="active">Crisis Center</a> <a routerLink="/heroes" routerLinkActive="active">Heroes</a> </nav> <router-outlet></router-outlet> `,
6. Router status
When each navigation life cycle is completed, the router will build a tree composed of ActivatedRoute, which represents the current state of the router. We can access the current RouterState value in any application using the Router service and its routerState property.
7.ROUTER_DIRECTIVES
RouterLink, RouterLinkActive and RouterOutlet are instructions in the ROUTER_DIRECTIVES collection, so they need to be added to the directives array in the @Component metadata.
directives: [ROUTER_DIRECTIVES]
The above is a summary of Angular2 (RC4) routing and navigation information. We will continue to add relevant information in the future. Thank you for your support for this site!