Angular2 (RC4) 路由与导航详解


Posted in Javascript onSeptember 21, 2016

基础知识

1.<base href>

大多数带路由的应用都要在 index.html 的 <head>标签下添加一个 <base>元素。

2.导入路由库

import { ROUTER_DIRECTIVES } from '@angular/router';

3.配置

首选方案是用带“路由数组”的provideRouter工厂函数([provideRouter(routes)])来启动此应用。

app.routes.ts

import { provideRouter, RouterConfig } from '@angular/router';

const routes: RouterConfig = [
 { path: 'crisis-center', component: CrisisCenterComponent },
 { path: 'heroes', component: HeroListComponent },
 { path: 'hero/:id', component: HeroDetailComponent },
 { path: '**', component: PageNotFoundComponent }
];

export const appRouterProviders = [
 provideRouter(routes)
];

 RouterConfig是一个路由数组,它决定如何导航。每个Route会把一个 URL 的 path映射到一个组件。

path不能使用斜杠/开头。路由器会为我们解析和生成URL。

第三个路由中的id是一个路由参数的 token。

第四个路由中的**代表路由是一个通配符路径。如果当前无法匹配上我们配置过的任何一个路径,路由器就会匹配上这一个,类似于 switch中的default。当需要显示 404 页面,该特性非常有用。

我们将配置好的routes数组传给provideRouter()函数,这个函数返回一个经过配置的 Router服务提供商

最后通过 appRouterProviders数组导出这个提供商,以便在main.ts中简单的注册路由器依赖。
在 main.ts中的bootstrap函数中注册路由器的提供商。

main.ts

// main entry point
import { bootstrap }   from '@angular/platform-browser-dynamic';
import { AppComponent }  from './app.component';
import { appRouterProviders } from './app.routes';

bootstrap(AppComponent, [
 appRouterProviders
])
.catch(err => console.error(err));

4.<router-outlet>

上面的配置完成后,当 URL 变为 /heroes时,路由器就会匹配到path为heroes的Route,并且在宿主视图中的<router-outlet>中显示HeroListComponent组件。

5.[routerLink]

我们在<a>标签中添加了routerLink指令,可以一次性绑定到我们路由中的path值。

如果routerLink想要绑定动态信息,我们就可以把它绑定到一个能够返回路由链接数组的模板表达式上。路由器最终会把此数组解析成一个 URL 和一个组件视图。

我们还可以往<a>中添加一个routerLinkActive指令,用于在相关的routerLink被激活时所在元素添加或移除CSS类。该指令可以直接添加到该元素上,也可以直接添加到其父元素上。

AppComponent模板

template: `
 <h1>Component Router</h1>
 <nav>
 <a routerLink="/crisis-center" routerLinkActive="active">Crisis Center</a>
 <a routerLink="/heroes" routerLinkActive="active">Heroes</a>
 </nav>
 <router-outlet></router-outlet>
`,

6.路由器状态

在每个导航的生命周期完成时,路由器会构建出一个 ActivatedRoute组成的树,它表示路由器的当前状态。我们可以在应用中任何使用 Router服务及其 routerState属性来访问当前的RouterState值。

7.ROUTER_DIRECTIVES

RouterLink、RouterLinkActive和RouterOutlet是ROUTER_DIRECTIVES集合中的指令,所以需要在@Component元数据中加入到directives数组中。

directives: [ROUTER_DIRECTIVES]

以上就是对Angular2 (RC4) 路由与导航的资料整理,后续继续补充相关资料,谢谢大家对本站的支持!

Javascript 相关文章推荐
对YUI扩展的Gird组件 Part-2
Mar 10 Javascript
Jquery+WebService 校验账号是否已被注册的代码
Jul 12 Javascript
jquery fancybox ie6不显示关闭按钮的解决办法
Dec 25 Javascript
javascript获取当前的时间戳的方法汇总
Jul 26 Javascript
深入浅析JavaScript中的constructor
Apr 19 Javascript
微信小程序实战之顶部导航栏(选项卡)(1)
Jun 19 Javascript
解决Extjs下拉框不显示的问题
Jun 21 Javascript
基于js中this和event 的区别(详解)
Oct 24 Javascript
VUE重点问题总结
Mar 19 Javascript
vue中的双向数据绑定原理与常见操作技巧详解
Mar 16 Javascript
浅谈Vue static 静态资源路径 和 style问题
Nov 07 Javascript
在VUE中使用lodash的debounce和throttle操作
Nov 09 Javascript
AngularJS 单元测试(二)详解
Sep 21 #Javascript
jQuery实现带延时功能的水平多级菜单效果【附demo源码下载】
Sep 21 #Javascript
AngularJS 单元测试(一)详解
Sep 21 #Javascript
vue.js+boostrap项目实践(案例详解)
Sep 21 #Javascript
AngularJS  ng-table插件设置排序
Sep 21 #Javascript
BooStrap对导航条的改造实践小结
Sep 21 #Javascript
AngularJs $parse、$eval和$observe、$watch详解
Sep 21 #Javascript
You might like
MySQL GBK→UTF-8编码转换
2007/05/24 PHP
PHP多例模式介绍
2013/06/24 PHP
php float不四舍五入截取浮点型字符串方法总结
2013/10/28 PHP
php生成QRcode实例
2014/09/22 PHP
作为程序员必知的16个最佳PHP库
2015/12/09 PHP
Javascript实现DIV滚动自动滚动到底部的代码
2012/03/01 Javascript
jquery Moblie入门—hello world的示例代码学习
2013/01/08 Javascript
jquery实现图片等比例缩放以及max-width在ie中不兼容解决
2013/03/21 Javascript
javascript实现十六进制颜色值(HEX)和RGB格式相互转换
2014/06/20 Javascript
我用的一些Node.js开发工具、开发包、框架等总结
2014/09/25 Javascript
JavaScript中发布/订阅模式的简单实例
2014/11/05 Javascript
基于jquery实现select选择框内容左右移动添加删除代码分享
2015/08/25 Javascript
jQuery实现自定义右键菜单的树状菜单效果
2015/09/02 Javascript
js只执行1次的函数示例
2016/07/20 Javascript
使用jQuery操作DOM的方法小结
2017/02/27 Javascript
vue-hook-form使用详解
2017/04/07 Javascript
[19:59]2014DOTA2国际邀请赛 IG战队纪录片
2014/08/07 DOTA
Python中的文件和目录操作实现代码
2011/03/13 Python
Python制作简易注册登录系统
2016/12/15 Python
Python实现感知机(PLA)算法
2017/12/20 Python
CentOS下Python3的安装及创建虚拟环境的方法
2018/11/28 Python
python读取ini配置的类封装代码实例
2020/01/08 Python
Python3.x+迅雷x 自动下载高分电影的实现方法
2020/01/12 Python
Django调用支付宝接口代码实例详解
2020/04/04 Python
Python pandas对excel的操作实现示例
2020/07/21 Python
德国香水、化妆品和护理产品网上商店:Parfumdreams
2018/09/26 全球购物
国税会议欢迎词
2014/01/16 职场文书
大班幼儿评语大全
2014/04/30 职场文书
计算机相关专业自荐信
2014/07/02 职场文书
2014年国庆节演讲稿
2014/09/19 职场文书
导游词之杭州西湖
2019/09/19 职场文书
Python中X[:,0]和X[:,1]的用法
2021/05/10 Python
Java面试题冲刺第十七天--基础篇3
2021/08/07 面试题
电脑只能进入安全模式无法正常启动的解决办法
2022/04/08 数码科技
Mybatis-plus配置分页插件返回统一结果集
2022/06/21 Java/Android
Nginx使用ngx_http_upstream_module实现负载均衡功能示例
2022/08/05 Servers