[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);
[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 ...
- [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 ...
- [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 ...
- [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 ...
- [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 ...
- [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. ...
- [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 ...
- [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 ...
- [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 ...
随机推荐
- linux(centos7)下安装tomcat7
1.下载tomcat1.7.tar.gz 2.将文件放到/usr/local中 #cp tomcat1.7.tar.gz /usr/local 3.进入到/usr/local中,解压缩tomcat1. ...
- MATLAB 通过二进制读写文件
这几天在做信息隐藏方面的应用,在读写文本文件时耗费许久,故特别的上网学习一二,这里给出一常用读写,其他的都类似. 很多时候,我们都要将一个.txt以二进制方式读出来,操作后在恢复成.txt文本. ma ...
- javascript常用的小知识
1. oncontextmenu="window.event.returnvalue=false" 将彻底屏蔽鼠标右键 <table border oncontextmenu ...
- bzoj2940: [Poi2000]条纹
2940: [Poi2000]条纹 条纹游戏是一个双人的游戏.所需要的物品有一个棋盘以及三种颜色的长方形条纹,这三种颜色分别是红色.绿色和蓝色.所有的红色条纹的尺寸是c*1,所有的绿色条纹的尺寸是z* ...
- 【转】Eclipse去除js(JavaScript)验证错误
这篇文章主要是对Eclipse去除js(JavaScript)验证错误进行了介绍.在Eclipse中,js文件常常会报错.可以通过如下几个步骤解决 第一步:去除eclipse的JS验证:将window ...
- 【原创】用Pwnage + Redsnow 制作完美越狱固件
原帖我发表在威锋论坛 现在貌似IOS 7.X系 大行其道,就算不是IOS7.X ,很多人也装着IOS 6.X系. 进入正文前首先介绍一下自己目前的"环境" 设备:iphone4 G ...
- makefile中一些符号的含义
关于gnu make的详细介绍参看http://www.gnu.org/software/make/manual/make.html 规则 让我们先来粗略地看一看Makefile的规则. targ ...
- CentOS 使用yum命令安装出现错误提示”could not retrieve mirrorlist http://mirrorlist.centos.org ***”
刚安装完CentOS,使用yum命令安装一些常用的软件,使用如下命令:yum –y install gcc. 提示如下错误信息: Loaded plugins: fastestmirror, refr ...
- javac 命令
HelloWorld.java:1: 需要为 class.interface 或 enum 锘缝ublic class HelloWorld{ ^ 1 错误 这个错误出现的原因主要是在中文操作系统中, ...
- 在Assertion中获取Response的headers,获取headers中信息,获取body(content)
// get the headers of the requestdef content= messageExchange.getResponseContent()def headers = mes ...