[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 ...
随机推荐
- 分享一些前端chm文档
分享地址:http://yun.baidu.com/share/link?shareid=39230983&uk=1008683945 对于网络不好的人来说,离线文档更加方便.打开速度更快. ...
- Strider 持续集成(gitlab)
Strider安装后运行: Mac: strider Ubuntu: bin/strider 本地运行时浏览器访问: http://127.0.0.1:3000 其他服务器:服务器地址 + 端口号(3 ...
- nodejs save遇到的一个坑
混合类型因为没有特定约束,因此可以任意修改,一旦修改了原型,则必须 调用markModified() >>> person.anything = {x:[3,4,{y:'change ...
- Having the Result Set of a Stored Proc Sent to You by RSS Feed.
Having the Result Set of a Stored Proc Sent to You by RSS Feed. by JBrooks 14. 十二月 2010 12:44 I wa ...
- ajax 瀑布流实现
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- emacs 操作集锦
1.C-k 的功能并不是剪切当前行,而是剪切当前行从光标到行末的内容. Emacs 中的剪切不叫剪切(cut),叫kill,复制(copy)不叫copy ,叫kill-ring-save (这个可以理 ...
- xcode报错:Command /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/b
今天使用xcode编译工程发现一个问题,这里记录一下防止忘记 xcode报错: Command /Applications/Xcode.app/Contents/Developer/Toolchain ...
- [翻译]创建ASP.NET WebApi RESTful 服务(10)
通过URI实现版本管理 另一种实现版本管理的方式就是通过URI来进行处理,类似于http://localhost:{your_port}/api/v1/students/.这种方式的好处是使用者可以清 ...
- <转载>内存管理内幕-动态分配的选择、折衷和实现 对malloc内存分配有个简单的描述,对内存管理有个大致的说明
这篇文章看后感觉不错,和我在glibc下的hurdmalloc.c文件里关于malloc的实现基本意思相同,同时,这篇文章还介绍了一些内存管理方面的知识,值得推荐. 原文链接地址为:http://ww ...
- HD2029
Palindromes _easy version Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/O ...