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

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

  1. [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 ...

  2. [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 applicat ...

  3. [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 ...

  4. [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 ...

  5. [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 t ...

  6. [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. ...

  7. [Angular2 Router] Load Data Based on Angular 2 Route Params

    You can load resource based on the url using the a combination of ActivatedRouteand Angular 2’s Http ...

  8. [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 ...

  9. [Angular2 Router] Configure Auxiliary Routes in the Angular 2 Router - What is the Difference Towards a Primary Route?

    In this tutorial we are going to learn how we can can configure redirects in the angular 2 router co ...

随机推荐

  1. linux下安装filezilla客户端遇到的问题

    访问filezilla ./filezilla 出现error while loading shared libraries : libpng12.so.o 缺少libpng12.so.o这个文件 解 ...

  2. 【转】Bellman_ford算法

    原文链接:http://www.cnblogs.com/Jason-Damon/archive/2012/04/21/2460850.html 摘自百度百科 Bellman-ford算法是求含负权图的 ...

  3. MATLAB将矩阵使用.txt文件格式保存

    具体的命令是:用save *.txt -ascii x x为变量 *.txt为文件名,该文件存储于当前工作目录下,再打开就可以 打开后,数据有可能是以指数形式保存的.   看下面这个例子: a =[1 ...

  4. Android4.4 耳机检测分析

    在ALSA架构中,ASOC是由3个部分组成:Platform.CODEC & Machine.而耳机检测一般是在Machine driver里实现,当然也可以在CODEC driver里实现. ...

  5. Java自带webservice

    http://blog.sina.com.cn/s/blog_61d8d96401013tmp.html 1.首先创建一个Java项目,作为Web services Endpoint. 2.创建一个H ...

  6. Linux配置静态IP

    在一块SSD的CentOS配置静态IP 1. 配置静态IP #vi /etc/sysconfig/network-scripts/ifcfg-eth0   DEVICE="eth0" ...

  7. Strassen算法

    如题,该算法是来自德国的牛逼的数学家strassen搞出来的,因为把n*n矩阵之间的乘法复杂度降低到n^(lg7)(lg的底是2),一开始想当然地认为朴素的做法是n^3,哪里还能有复杂度更低的做法,但 ...

  8. ajax 第一个程序

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  9. UTC+0800是什么意思

    <%@ language="javascript" %> <html> <body> <% var d=new Date() var h= ...

  10. 3.VS2010C++相关文件说明

    stdafx.h说明:stdafx的英文全称为:Standard Application Framework Extensions(标准应用程序框架的扩展).所谓头文件预编译,就是把一个工程(Proj ...