[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 ...
随机推荐
- [翻译]Python——十年语言之冠
最近我发现了这个PYPL——编程语言流行指数.它对各种语言的流行指标进行了二次发掘.作者指出TIOBE指数很可能不能反映出真实情况,归咎于一些编程语言的名称会导致误解.他引入了一些新术语,利用谷歌趋势 ...
- cJSON学习笔记
1.JSON格式简述 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.易于人阅读和编写,同时也易于机器解析和生成.它基于JavaScript(Standa ...
- Chapter11:关联容器
当用decltype来获得一个函数指针类型时,必须加上一个*来指出我们要使用一个给定函数类型的指针.decltype<CompareIsbn>*. map<string, int&g ...
- debian7下部署nginx服务器
笔者是在vmware中的Debian7下部署nginx服务器,采用离线部署方式.过程如下: 1.准备好需要的离线安装包 nginx-1.6.2.tar.gz,pcre-8.34.tar.gz,open ...
- webstorm+nodejs+JetBrains IDE Support+chrome打造前端开发神器
#webstorm+nodejs+JetBrains IDE Support+chrome打造前端开发神器 -- 工欲善其事 必先利其器 ##各工具介绍 `webstorm`是**JetBrains* ...
- 搭建sql注入实验环境(基于windows)
搭建服务器环境 1.下载xampp包 地址:http://www.apachefriends.org/zh_cn/xampp.html 很多人觉得安装服务器是件不容易的事,特别是要想添加MySql, ...
- 基于AWS的自动化部署实践
过年前,我给InfoQ写了篇文章详细介绍我们团队在过去4年基于AWS的自动化部署实践.文章包括了:为什么选择AWS.AWS上自动化部署的优势和挑战.我们的解决方案,以及和AWS DevOps方案(Op ...
- ubuntu 错误 & 解决
1.ssh时出现“段错误(核心已转储)” 原因:说明与ssh有关的内核代码被修改过并且部分代码访问内存过界 解决:1.将内核代码被修改过的部分修改回来 2.sudo apt-get re ...
- knowledge
- xml velocity模板
. <?xml version="1.0" encoding="GBK"?> <PACKET type="REQUEST" ...