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 相关文章推荐
js 链式延迟执行DOME
Jan 04 Javascript
Jquery中ajax方法data参数的用法小结
Feb 12 Javascript
JavaScript利用正则表达式去除日期中的“-”
Jul 01 Javascript
jQuery实现文本展开收缩特效
Jun 03 Javascript
jQuery技巧之让任何组件都支持类似DOM的事件管理
Apr 05 Javascript
js中遍历对象的属性和值的方法
Jul 27 Javascript
js实现浏览器倒计时跳转页面效果
Aug 12 Javascript
Windows系统下安装Node.js的步骤图文详解
Nov 15 Javascript
js逆向解密之网络爬虫
May 30 Javascript
Element-ui中元素滚动时el-option超出元素区域的问题
May 30 Javascript
JSX在render函数中的应用详解
Sep 04 Javascript
详解Vue 项目中的几个实用组件(ts)
Oct 29 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
一个PHP的String类代码
2010/04/20 PHP
ajax php传递和接收变量实现思路及代码
2012/12/19 PHP
查找php配置文件php.ini所在路径的二种方法
2014/05/26 PHP
php获取数组元素中头一个数组元素值的实现方法
2014/12/20 PHP
PHP的Yii框架中过滤器相关的使用总结
2016/03/29 PHP
PHP中list方法用法示例
2016/12/01 PHP
利用jQuery的$.event.fix函数统一浏览器event事件处理
2009/12/21 Javascript
一个简单的js动画效果代码
2010/07/20 Javascript
jQuery LigerUI 使用教程表格篇(1)
2012/01/18 Javascript
JavaScript学习笔记之Function对象
2015/01/22 Javascript
jQuery实现的经典竖向伸缩菜单效果代码
2015/09/24 Javascript
最全的Javascript编码规范(推荐)
2016/06/22 Javascript
vue2实现移动端上传、预览、压缩图片解决拍照旋转问题
2017/04/13 Javascript
基于BootStrap实现简洁注册界面
2017/07/20 Javascript
Element-UI Table组件上添加列拖拽效果实现方法
2018/04/14 Javascript
解决循环中setTimeout执行顺序的问题
2018/06/20 Javascript
JS实现图片旋转动画效果封装与使用示例
2018/07/09 Javascript
nodejs(officegen)+vue(axios)在客户端导出word文档的方法
2018/07/31 NodeJs
使用JavaScript实现node.js中的path.join方法
2018/08/12 Javascript
NodeJS使用Range请求实现下载功能的方法示例
2018/10/12 NodeJs
基于Node的Axure文件在线预览的实现代码
2019/08/28 Javascript
JS中==、===你分清楚了吗
2020/03/04 Javascript
JS原型prototype和__proto__用法实例分析
2020/03/14 Javascript
vue穿梭框实现上下移动
2021/01/29 Vue.js
Python中的time模块与datetime模块用法总结
2016/06/30 Python
django中静态文件配置static的方法
2018/05/20 Python
Python将8位的图片转为24位的图片实现方法
2018/10/24 Python
解决django 新增加用户信息出现错误的问题
2019/07/28 Python
python3中数组逆序输出方法
2020/12/01 Python
家长会学生家长演讲稿
2013/12/29 职场文书
交通事故协议书范文
2014/04/16 职场文书
部门活动策划方案
2014/08/16 职场文书
2015年乡镇人大工作总结
2015/04/22 职场文书
2015年物业管理员工工作总结
2015/10/15 职场文书
SQL Server数据定义——模式与基本表操作
2021/04/05 SQL Server
MySQL的join buffer原理
2021/04/29 MySQL