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. Win10正式版激活方法有哪些?如何激活Win10?

    很多用户都想将系统升级到Win10,但是却不知道怎么激活Win10正式版的方法,其实不同版本激活正式版Win10的方法秘钥不同,下面99安卓网小编就分享一些激活Win10正式版的方法和秘钥,供大家参考 ...

  2. html --- ajax --- javascript --- 简单的封装

    Ajax的简单封装 Ajax的全称是AsynchronousJavaScriptAndXML 如有疑问请参考:http://zh.wikipedia.org/zh-cn/AJAX 以及传智播客的视频教 ...

  3. 《Java数据结构与算法》笔记-CH5-链表-1单链表

    /** * Link节点 * 有数据项和next指向下一个Link引用 */ class Link { private int iData;//数据 private double dData;//数据 ...

  4. HDU-2888 Check Corners 二维RMQ

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2888 模板题.解题思路如下(转载别人写的): dp[row][col][i][j] 表示[row,ro ...

  5. E:Package 'Vim' has no installation candidate问题解决

    问题描述: root@zhouls-virtual-machine:~# apt-get install vimReading package lists... DoneBuilding depend ...

  6. Hadoop Java开发实用快捷键收藏

    不断总结更新.... Alt  +  /    补全 Ctrl + T 打出结构 Ctrl + 2 ,再选择 Quick Assist - Assign to local variable  Ctrl ...

  7. 关于文章“cocos2dx移植android平台-我的血泪史”需要注意事项

    关于文章"cocos2dx移植android平台-我的血泪史"需要注意事项 在上次转载的这篇文章中,按照配置一步一步的下去.发现工程中在Android.mk中有一处错误.直接bui ...

  8. What's Exposure?

    [What's Exposure?] ISO:即相机的感光度.ISO数值的大小是DC对光线反应的敏感程度测量值,通常以ISO数值表示,数值越大表示对光线的敏感性越强,数值越小表示越弱,是控制曝光量的一 ...

  9. Java对信号的处理

    本文主要包括Java如何处理信号,直接上代码. 1. 实现SignalHandler package com.chzhao.SignalTest; import sun.misc.*; @Suppre ...

  10. CISCO ASA 防火墙 IOS恢复与升级

    在IOS被误清除时的处理办法: 1.从tftp上的ios启动防火墙 防火墙启动后 ,按“ESC”键进入监控模式 rommon #2> ADDRESS=192.168.1.116 rommon # ...