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. Intent相关

    Intent是什么? 翻译为:意图,目的(名词) 其实根本没必要管它是什么,看看它能做什么就好了. 不过后来我知道了,它就是个机制----通信机制-----android的许多组件间的交流要依赖它. ...

  2. WMI使用的WIN32_类库名

    WMI使用的WIN32_类库名 包括:硬件类.操作系统类.安装应用程序类.WMI服务管理类.性能计数器类1.硬件类冷却类别Win32_Fan--风扇Win32_HeatPipe--热管Win32_Re ...

  3. CentOS安装中文输入法:ibus

    转自 http://gnucto.blog.51cto.com/3391516/935964 系统环境:Centos 6.3 编程语言:python + Bash 输入法:ibus 权限支持:root ...

  4. [WebService]之Schema

    schema入门 1:schema出现的目的是通过一个更加合理的方式来编写xml文件的限制(以XML语法的方式) 2:schema可以使用命名空间来支持多个名称相同的元素 3:schema可以很好的的 ...

  5. air开发中的requestedDisplayResolution 扫盲

    app.xml里面requestedDisplayResolution 取值可以为high/standard, 如果为high表示设备跟ios声明它需要使用高清屏(其实就是需要最大分辨率) 这里我猜测 ...

  6. 重复安装Lync导致发布拓扑失败

    重复安装Lync会引起发布拓扑错误,主要原因就是Lync在域控服务器写了东西. 在出错日志中看到guid,查资料说到域控的CN=Trusted Services,CN=RTC Service,CN=S ...

  7. 实体框架 (EF) 入门 => 四、CodeFirst 枚举支持

    当使用 Code First 开发时,通常是从编写用来定义概念(域)模型的 .NET Framework 类开始. 插入记录没有为 Budget 赋值. 数值类型默认值为0,数据库中都为not nul ...

  8. ESB的XmlProPertyMgr类的getNode(xxx)方法

    //------------------------------------------------------------------------------ public static Eleme ...

  9. Perl初识笔记

    前两天项目中遇到了一个Perl脚本程序,需要读懂该程序,由于以前重来没有用过Perl语言,所以没法搞定.今天抽空把该语言的基础看了一遍,基本上内读懂Perl脚本程序了吧.真是如网上很多分享的经验所说, ...

  10. MyEclipse 8.6反编译插件安装

    一.下载插件文件:jad.exe.jadeclipse    http://www.varaneckas.com/sites/default/files/jad/jad158g.win.zip    ...