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. python中函数总结之装饰器闭包

    1.前言 函数也是一个对象,从而可以增加属性,使用句点来表示属性. 如果内部函数的定义包含了在外部函数中定义的对象的引用(外部对象可以是在外部函数之外),那么内部函数被称之为闭包. 2.装饰器 装饰器 ...

  2. ansible playbook最佳实践

    本篇主要是根据官方翻译而来,从而使简单的翻译,并没有相关的实验步骤,以后文章会补充为实验步骤,此篇主要是相关理论的说明,可以称之为中文手册之一,具体内容如下: Ansible playbooks最佳实 ...

  3. C#单元测试

    简单来说,单元测试就是局部测试,即是对项目中的某个静态类测试.静态方法测试.类的实例化测试以及类的方法测试.当您有一个具体的项目时您可以通过运行查看结果的方式进行测试,但当您只有一个类而没有完整的项目 ...

  4. winform form

    WinForm:Windows Form,.Net中用来开发Windows窗口程序的技术,无论是之前学的控制台程序,还是后面要学的asp.net都是调用.net框架,因此所有知识点都是一样的.新建一个 ...

  5. python 抽象类、抽象方法的实现

    由于python 没有抽象类.接口的概念,所以要实现这种功能得abc.py 这个类库,具体方式如下 from abc import ABCMeta, abstractmethod #抽象类 class ...

  6. 如何杀掉当前正在执行的hadoop任务

    [root@Slave01 ~]# hadoop job -listDEPRECATED: Use of this script to execute mapred command is deprec ...

  7. httpcomponents 学习1--并发多线程GET

    package org.apache.http.examples.client; import org.apache.http.HttpEntity; import org.apache.http.H ...

  8. OC使用inline替代宏

    CG_INLINE voidGCDDelay(int64_t delayInSeconds,dispatch_block_t block){ dispatch_time_t popTime = dis ...

  9. matlab 画平面

    y = :; z = ones(); surf(x,y,z):

  10. hdu 1045 Fire Net(最小覆盖点+构图(缩点))

    http://acm.hdu.edu.cn/showproblem.php?pid=1045 Fire Net Time Limit:1000MS     Memory Limit:32768KB   ...