[Angular2 Router] Build Angular 2 Navigation with routerLink

Angular 2 navigation is configured using the routerLink directive. The routerLink directive behaves like an href’s you are familiar with, but it hooks into Angular 2’s router to navigate between your defined routes.

app.component.html:

<nav>
  <a routerLink="">Home</a>
  <a routerLink="contact">Contact</a>
</nav>
<router-outlet></router-outlet>

app.routers.ts:

import {HomeComponent} from "./home/home.component";
import {RouterModule} from "@angular/router";
import {ContactComponent} from "./contact/contact.component";
const routes = [
  {path: ‘‘, component: HomeComponent},
  {path: ‘contact‘, component: ContactComponent},
];

export default RouterModule.forRoot(routes);

Github

时间: 2024-10-21 05:37:24

[Angular2 Router] Build Angular 2 Navigation with routerLink的相关文章

[Angular2 Router] Resolving route data in Angular 2

From Article: RESOLVING ROUTE DATA IN ANGULAR 2 Github If you know Anuglar UI router, you must know resolve function in ui router, which you can load data before template and controller get inited. In Angular2 router, you can also use resovler. The r

[Angular2 Router] Exiting an Angular 2 Route - How To Prevent Memory Leaks

In this tutorial we are going to learn how we can accidentally creating memory leaks in our application while using the Angular 2 router. We are going to learn how we can prove that the memory leak is happening, we are going to learn what is causing

[Angular2 Router] CanDeactivate Route Guard - How To Confirm If The User Wants To Exit A Route

In this tutorial we are going to learn how we can to configure an exit guard in the Angular 2 Router. We are going to learn how to use a CanDeactivate route guard to ask the user if he really wants to exist the screen, giving the user to for example

Angular2 Router

1 import Router import {RouteConfig, RouterOutlet, RouterLink, routerInjectables} from 'angular2/router'; 2 setting your RouteConfig @RouteConfig([ {path: '/', component: List, as: 'list'}, {path: '/about', component: Add, as: 'add'}, {path: '/help',

angular2 ng build --prod 报错:Module not found: Error: Can&#39;t resolve &#39;./$$_gendir/app/app.module.ngfactory&#39;

调试页面 ng serve 正常 ng build 也正常 ng build --prod 异常:Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory' 开始以为是以前那样,引用错了路径或少引用了东西. 搜了好多资料,发现是 angular-cli 的版本有点低了(因为用了最新的material) 找到原因了,问题就很容易解决了 第一步: rm -rf node_modules/ 第二部: npm

[Angular2 Router] Style the Active Angular 2 Navigation Element with routerLinkActive

You can easily show the user which route they are on using Angular 2’s routerLinkActive. Whenever a route matches the routerLink defined on the element, then the routerLInkActive will add the class that you assign it to. See Doc app.component.ts: imp

[Angular2 Router] Programmatic Router Navigation via the Router API - Relative And Absolute Router Navigation

In this tutorial we are going to learn how to navigate programmatically (or imperatively) by using the Router API. We are going to learn how to use the function navigateByUrl to navigate using a manually constructed string, but we are also going to l

[Angular2 Router] Use Params from Angular 2 Routes Inside of Components

Angular 2’s ActivatedRoute allows you to get the details of the current route into your components. Params on the ActivatedRoute are provided as streams, so you can easily map the param you want off of the stream and display it in your template. For

[Angular2 Router] Lazy Load Angular 2 Modules with the Router

Angular 2 lazy loading is a core feature of Angular 2. Lazy loading allows your application to start up faster because it only needs to use the main App Module when the page initially loads. As you navigate between routes, it will load the additional