angular2路由是管理angular2应用内部导航的一个重要内容,在angular应用中,很多的组件是通过组合完成一个复杂的应用,不可避免的是我们常会在视图间切换,那么这是就需要使用路由来管理视图间的转换。

路由定义

先看一个简单的路由定义

///<reference path="../node_modules/angular2/typings/browser.d.ts"/>

import {Component} from 'angular2/core';

import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';

import {parentCmp} from "./parent.component";

import {planetList} from "./planet-list.component";

@Component({

selector: 'my-app',

template: `

<h3 class="title">Angular 2 Router Example</h3>

<nav>

<a [routerLink]="['Parent']">parent</a>

<a [routerLink]="['PlanetList']">planetList</a>

</nav>

<router-outlet></router-outlet>

`,

directives: [ROUTER_DIRECTIVES]

})

@RouteConfig([

{

path: '/contact',

name: 'Parent',

component: parentCmp,

useAsDefault: true

},

{

path: '/planetList',

name: 'PlanetList',

component: planetList

}

])

export class RouteExampleAppComponent { }

从这个例子可以看出路由定义的过程

1、  引入路由组件import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router'

2、  引入我们所需的导航组件

import {parentCmp} from "./parent.component";

import {planetList} from "./planet-list.component";

3、  定义组件,配置模板,定义路由

<a [routerLink]="['Parent']">parent</a>定义了一个路由,其中的Parent是我们的一个的一个路由标签,来自下面的路由配置,注意使用驼峰的表达方式。

<router-outlet></router-outlet>定义了视图的显示位置,即导航的模块显示区域

directives: [ROUTER_DIRECTIVES],引入路由指令

@RouteConfig:用于进行路由配置,其中path只路由的路径,在url中能够看到;name指路由的名称,和上面导航一致;component路由的组件即路由指向的组件。

这样一个简单的路由组件就基本完成

路由使用

import {bootstrap} from 'angular2/platform/browser';

import {ROUTER_PROVIDERS} from 'angular2/router';

import {RouteExampleAppComponent} from "./myRoute";

bootstrap(RouteExampleAppComponent, [ROUTER_PROVIDERS]);

这里和前面的bootstrap组件调用不同的是除了引入自定义的组件外还需要注入angular的路由服务。

父子路由

在我们的实际应用中还常遇到这样的一个场景,父组件中包含了一些路由配置,在子组件中同样还有路由配置,有些情况下还需要在父组件通过路由传递数据到子组件中,那么这些情况如何实现呢?

看一个例子

myRoute.ts

///<reference path="../node_modules/angular2/typings/browser.d.ts"/>

import {Component} from 'angular2/core';

import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';

import {home} from "./home";

import {childRoute1} from "./childRoute1";

import {childRoute1Detail} from './ChildRoute1Detail'

@Component({

selector: 'my-app',

template: `

<h3 class="title">Angular 2 Router Example</h3>

<nav>

<a [routerLink]="['Home']">Home</a>

<a [routerLink]="['ChildRoute1']">子路由</a>

</nav>

<router-outlet></router-outlet>

`,

directives: [ROUTER_DIRECTIVES]

})

@RouteConfig([

{

path: '/',

name: 'Home',

component: home,

useAsDefault: true

},

{

path: '/childRoute1',

name: 'ChildRoute1',

component: childRoute1

},

{

path: '/childRoute1Detail',

name: 'ChildRoute1Detail',

component: childRoute1Detail

}

])

export class RouteExampleAppComponent { }

这是一个父组件,里面加入了路由配置,其中ChildRoute1是一个子路由,而'ChildRoute1Detail'是一个子路由的子路由即孙子路由,这些路由都在父组件中进行了设置。

childRoute.ts

import {Component} from 'angular2/core';

import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';

import {Router, RouteParams} from 'angular2/router';

import {childRoute1Detail} from './ChildRoute1Detail'

@Component({

selector: "childRoute1",

template: ` this is a route

<a (click)="onSelect()">点击</a>

<a [routerLink]="['ChildRoute1Detail']">子路由明细1</a>

`,

directives: [ROUTER_DIRECTIVES]

})

export class childRoute1 {

constructor(private _router: Router, private _routeParams: RouteParams) {

}

onSelect() {

this._router.navigate(['ChildRoute1Detail']);

}

};

这是一个子组件,里面没有路由配置,使用的是父组件中的路由配置,这里的两个链接实现的功能是一样的,都是将孙子组件加载到父组件的router-outlet中。

childRoute1Detail.ts

import {Component} from 'angular2/core';

import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';

@Component({

selector: "childRoute1Detail",

template: `<h1>子路由1明细</h1>`

})

export class childRoute1Detail { };

这是一种应用场景,但这种应用场景显然不是好的选择,因为实际开发中各个模块可能都是单独开发,父组件也可能不知道究竟会有多少个子组件路由,子组件路由交给子组件来配置可能是最好的方式了,那么如何实现呢?

我们需要将父组件myRoute中的不属于它的路由'ChildRoute1Detail'移除,并放在子组件childRoute中,注意父组件不能和子组件有相同的路由配置,否则会出现下面的错误。

在子组件childRoute加入'ChildRoute1Detail'路由时还需要使用useAsDefault: true配置

@RouteConfig([

{

path: '/childRoute1Detail',

name: 'ChildRoute1Detail',

component: childRoute1Detail,

useAsDefault: true

}

])

否则会出现

同时在父组件的路由路径中需要对子路由加入“…”来标识这是个子路由,否则会出现下面错误

@RouteConfig([

{

path: '/',

name: 'Home',

component: home,

useAsDefault: true

},

{

path: '/childRoute1/...',

name: 'ChildRoute1',

component: childRoute1

}

])

完整的childRoute1.ts

import {childRoute1Detail} from './ChildRoute1Detail'

@Component({

selector: "childRoute1",

template: `

this is a route

<a (click)="onSelect()">点击</a>

<a [routerLink]="['ChildRoute1Detail']">子路由明细1</a>

<router-outlet></router-outlet>

`,

directives: [ROUTER_DIRECTIVES]

})

@RouteConfig([

{

path: '/childRoute1Detail',

name: 'ChildRoute1Detail',

component: childRoute1Detail,

useAsDefault: true

}

])

export class childRoute1 {

constructor(private _router: Router, private _routeParams: RouteParams) {

}

onSelect() {

this._router.navigate(['ChildRoute1Detail']);

}

};

路由参数

通过在routelink或route.navigate中可以指定参数,如下

<a [routerLink]="['ChildRoute1Detail', {param1: param1}]">子路由明细1</a>

this._router.navigate(['ChildRoute1Detail', {param1:this.param1}]);

这是两种方式传递param1参数

接受路由参数使用RouteParams或RouteData

this.param1 = routeParams.get("param1");

使用routedata方式则需要在路由配置中加入data标签,如下

@RouteConfig([

{

path: '/childRoute1Detail',

name: 'ChildRoute1Detail',

component: childRoute1Detail,

data: { param1:"routedata " },

useAsDefault: true

}

])

使用时
constructor(data: RouteData) {

this.param1 = data.get("param1");

}

这里要注意的是路由参数通常情况下我们不建议传递复杂类型的参数,我们可以传递id参数,然后在通过一个service注入并通过这个id找出该复杂类型的实例 。

另外,在使用路由参数时不能忘记引用

import {Router, RouteParams} from 'angular2/router';

import { RouteData} from 'angular2/router';

angularjs2 学习笔记(四) 路由的更多相关文章

  1. Angularjs2 学习笔记

    angularjs2 学习笔记(一) 开发环境搭建   开发环境,vs2013 update 5,win7 x64,目前最新angular2版本为beta 17 第一步:安装node.js 安装nod ...

  2. C#可扩展编程之MEF学习笔记(四):见证奇迹的时刻

    前面三篇讲了MEF的基础和基本到导入导出方法,下面就是见证MEF真正魅力所在的时刻.如果没有看过前面的文章,请到我的博客首页查看. 前面我们都是在一个项目中写了一个类来测试的,但实际开发中,我们往往要 ...

  3. IOS学习笔记(四)之UITextField和UITextView控件学习

    IOS学习笔记(四)之UITextField和UITextView控件学习(博客地址:http://blog.csdn.net/developer_jiangqq) Author:hmjiangqq ...

  4. java之jvm学习笔记四(安全管理器)

    java之jvm学习笔记四(安全管理器) 前面已经简述了java的安全模型的两个组成部分(类装载器,class文件校验器),接下来学习的是java安全模型的另外一个重要组成部分安全管理器. 安全管理器 ...

  5. Learning ROS for Robotics Programming Second Edition学习笔记(四) indigo devices

    中文译著已经出版,详情请参考:http://blog.csdn.net/ZhangRelay/article/category/6506865 Learning ROS for Robotics Pr ...

  6. Typescript 学习笔记四:回忆ES5 中的类

    中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...

  7. ES6学习笔记<四> default、rest、Multi-line Strings

    default 参数默认值 在实际开发 有时需要给一些参数默认值. 在ES6之前一般都这么处理参数默认值 function add(val_1,val_2){ val_1 = val_1 || 10; ...

  8. vue2.0学习笔记之路由(二)路由嵌套+动画

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. vue2.0学习笔记之路由(二)路由嵌套

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. muduo网络库学习笔记(四) 通过eventfd实现的事件通知机制

    目录 muduo网络库学习笔记(四) 通过eventfd实现的事件通知机制 eventfd的使用 eventfd系统函数 使用示例 EventLoop对eventfd的封装 工作时序 runInLoo ...

随机推荐

  1. 接口自动化的根基--HTTP协议

    点击标题下「蓝色微信名」可快速关注 坚持的是分享,搬运的是知识,图的是大家的进步,没有收费的培训,没有虚度的吹水,喜欢就关注.转发(免费帮助更多伙伴)等来交流,想了解的知识请留言,给你带来更多价值,是 ...

  2. mongodb分组,的两种方式,先记一下

    using MongoDB.Bson; using MongoDB.Driver; using MongoDB.Driver.Builders; using NationalUnion.AdGalle ...

  3. JS 点击按钮后弹出遮罩层,有关闭按钮

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...

  4. asp.net常用字符串函数

    /// <summary> /// 提取字符串中的数字 /// </summary> /// <param name="str"></pa ...

  5. openresty入门12 openresty php 整合

    利用 openresty 的 drizzle-nginx-module模块 读取数据 传递到  php后端 利用到  openresty 的并发,无阻塞,mysql连接池,memcache|redis ...

  6. oracle查询使用频率和磁盘消耗需要缓存大小

    SELECT * FROM (SELECT Sql_Text, Sql_Id, Cpu_Time FROM V$sql ORDER BY Cpu_Time DESC) ORDER BY Rownum ...

  7. 用绝对路径引用JS、CSS

    项目中,最好使用绝对路径引用JS和CSS文件,详情如下: 1.vm文件中: <link rel="stylesheet" href="$!{request.cont ...

  8. javaSE第二天

    第二天    7 1:关键字(掌握)    7 2:标识符(掌握)    7 (1)就是给类,接口,方法,变量等起名字的字符序列    7 (2)组成规则:    7 (3)注意事项:    8 (4 ...

  9. IIS服务器环境配置(一)

    在开始-> 控制面板 ->打开或关闭功能 IIS 服务器程序 勾选  HTML勾选 完成添加后  重启  确认是否添加上在控制面板的 管理工具中查看

  10. void指针(void*)用法

    首先看一段测试代码: #include <stdio.h> int void_test(void* data) { ; num = *(int*)data; printf("nu ...