Angular2 (RC5) 路由与导航详解


Posted in Javascript onSeptember 21, 2016

之前总结过RC4的路由配置,Angular2升级RC5之后增加了NgModule和RouterModule等等很多组件,所以现在的路由配置方式也变化比较大。

1.<base href>

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

2.配置路由器

app.routing.ts

import { Routes, RouterModule } from '@angular/router';
const appRoutes: Routes = [
  {
    path: '',
    redirectTo: '/dashboard',
    pathMatch: 'full'
  },
  {
    path: 'heroes',
    component: HeroesComponent
  },
  {
    path: 'dashboard',
    component: DashboardComponent
  },
  {
    path: 'detail/:id',
    component: HeroDetailComponent
  }
]
export const routing = RouterModule.forRoot(appRoutes);

创建一个Routes类型数组,它会把每一个URL匹配到path,匹配成功则映射到该path对应的组件component上。
然后把这个路由数组appRoutes通过RouterModule.forRoot(appRoutes)导出。

3.引用路由

app.module.ts

import { routing } from './app.routing';

@NgModule({
  imports: [
    BrowserModule,
    routing
  ],
  declarations: [
    AppComponent
    // some component
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

就这样,我们在@NgModule的imports中引用了我们配置好的路由器。

4.在模板中使用路由

完成上面的2、3步骤,我们就能在模板中使用路由了

app.component.ts

template: `
   <nav>
     <a routerLink='/dashboard' routerLinkActive='active'>Dashboard</a>
     <a routerLink='/heroes' routerLinkActive='active'>Heroes</a>
   </nav>
   <router-outlet></router-outlet>
`

我们在<a>标签中添加了routerLink指令,可以一次性绑定到我们路由中的path值。
如果这个URL的path和routerLink匹配,就把映射到的组件在<router-outlet>中显示。

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

5.总结

在此,我们就完成了Angular2 (RC5)的路由配置。RC5和RC4的路由配置不同之处就在于, RC5的路由不需要在设置路由模板的TS文件导入路由库

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

直接在NgModule中引入配置好的路由就可以

@NgModule({
  imports: [
    routing
  ]
})

导入的路由组件由

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

变成了

import { Routes, RouterModule } from '@angular/router';

路由数组的导出方式由

export const appRouterProviders = [provideRouter(routes)];

变成了

export const routing = RouterModule.forRoot(appRoutes);

其他部分大体上都是相同的,比如路由的数组的配置写法、routerLink指令和<router-outlet>等等。详情见我写过的RC4的路由配置方式。

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

Javascript 相关文章推荐
JavaScript TO HTML 转换
Jun 26 Javascript
JavaScript 自动分号插入(JavaScript synat:auto semicolon insertion)
Nov 04 Javascript
myeclipse安装jQuery插件的方法
Mar 29 Javascript
幻灯片带网页设计中的20个奇妙应用示例小结
May 27 Javascript
js判断游览器类型及版本号的代码
May 11 Javascript
javascript正则表达式使用replace()替换手机号的方法
Jan 19 Javascript
50 个 jQuery 插件可将你的网站带到另外一个高度
Apr 26 Javascript
轻松掌握JavaScript享元模式
Aug 27 Javascript
AngularJS使用拦截器实现的loading功能完整实例
May 17 Javascript
基于Bootstrap的标签页组件及bootstrap-tab使用说明
Jul 25 Javascript
vue2.0设置proxyTable使用axios进行跨域请求的方法
Oct 19 Javascript
JSONObject与JSONArray使用方法解析
Sep 28 Javascript
Angular2 (RC4) 路由与导航详解
Sep 21 #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
You might like
php生成随机字符串可指定纯数字、纯字母或者混合的
2014/04/18 PHP
深入解析PHP的Laravel框架中的event事件操作
2016/03/21 PHP
PHP判断JSON对象是否存在的方法(推荐)
2016/07/06 PHP
php实现的错误处理封装类实例
2017/06/20 PHP
几个高效,简洁的字符处理函数
2007/04/12 Javascript
jquery CSS选择器笔记
2010/03/29 Javascript
JQuery中对服务器控件 DropdownList, RadioButtonList, CheckboxList的操作总结
2011/06/28 Javascript
js实现动态添加、删除行、onkeyup表格求和示例
2013/08/18 Javascript
js动态添加事件并可传参数示例代码
2013/10/21 Javascript
ExtJS4 动态生成的grid导出为excel示例
2014/05/02 Javascript
用javascript实现自动输出网页文本
2015/07/30 Javascript
jQuery中Find选择器用法示例
2016/09/21 Javascript
jquery 正整数数字校验正则表达式
2017/01/10 Javascript
Promise.all中对于reject的处理方法
2018/08/01 Javascript
koa2实现登录注册功能的示例代码
2018/12/03 Javascript
vue路由守卫+登录态管理实例分析
2019/05/21 Javascript
Vue scrollBehavior 滚动行为实现后退页面显示在上次浏览的位置
2019/05/27 Javascript
Python计算三角函数之asin()方法的使用
2015/05/15 Python
Python正则捕获操作示例
2017/08/19 Python
解决python matplotlib imshow无法显示的问题
2018/05/24 Python
django用户登录验证的完整示例代码
2019/07/21 Python
python Manager 之dict KeyError问题的解决
2019/12/21 Python
使用python实现多维数据降维操作
2020/02/24 Python
keras打印loss对权重的导数方式
2020/06/10 Python
python 常见的反爬虫策略
2020/09/27 Python
解析html5 canvas实现背景鼠标连线动态效果代码
2019/06/17 HTML / CSS
澳大利亚现代波西米亚风格女装网站:Bohemian Traders
2018/04/16 全球购物
微软台湾官方网站:Microsoft台湾
2018/08/15 全球购物
德国大型箱包和皮具商店:Koffer
2019/10/01 全球购物
程序集与命名空间有什么不同
2014/07/25 面试题
工资收入证明
2014/10/07 职场文书
2014年小班保育员工作总结
2014/12/23 职场文书
工作检讨书大全
2015/01/26 职场文书
2015年护士长个人工作总结
2015/04/24 职场文书
承诺书范本大全
2015/05/04 职场文书
golang 实现两个结构体复制字段
2021/04/28 Golang