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. MFC学习 进程间通信

    内存共享通信方式 server.cpp #include <stdio.h> #include <Windows.h> int main() { HANDLE hFile; h ...

  2. maya user guider第一课,一些基本概念

    1.maya主要用于建模,动画, 视觉特效,游戏, 和模拟 一般分为以下几类: l  建模: ploygons, nurbs, subdivision surfaces   这是不同的建模方法. po ...

  3. 自己的3dmax作品RX-105柯西高达

    背后视角带导弹仓. 侧面. 侧后视角. 前侧视角. 斜前上视角 使用关联实现骨骼功能,头.躯干.肩.上臂.前臂.手腕.手指.腰.髋关节.踝关节.脚掌皆由骨骼(是通过多边形关联实现骨骼功能,而不是使用3 ...

  4. &&和||的那点事儿

    以前一直以为&&和||的运算结果就是布尔值,但今天看到一段代码又填补的一些知识漏洞. var a = (1&&2&&5) || 3; console.l ...

  5. The init method

    The init method is a special method that gets invoked when an object is instantiated. Its full name ...

  6. php中未定义变量的使用

    在php中,若变量$test没有定义,则: empty($test)返回true: !empty($test)返回false: 具体可参考http://www.jb51.net/article/246 ...

  7. cocos2dx 内存管理机制

    持续更新吧. 刚开始看了一些. 一,CCObject  提供引用计数 1,unsinged int m_uReference; //此为CCOBject的引用计数,初始化为 1: new CCObje ...

  8. grep使用

    grep常用的使用方法 grep –rns “match_content”filename 查看匹配内容的行 find /path –name “*.h” –o –name “*.cpp” | xar ...

  9. kickstrat

    定制部分 硬盘分区 root密码 网络地址 公共部分 %pre% %post% tcp调优 集中配置程序(ansible) sudo配置

  10. Edit 方法

    1. 在FORM 的grid里面作为记录选择字段 AX 的edit 方法可以很方便地给用户提供记录选择功能,而不用在TABLE上添加新字段. 通常结合map使用,一般edit 方法格式: edit N ...