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 相关文章推荐
Zero Clipboard js+swf实现的复制功能使用方法
Mar 07 Javascript
JS实现div内部的文字或图片自动循环滚动代码
Apr 19 Javascript
使用insertAfter()方法在现有元素后添加一个新元素
May 28 Javascript
jQuery插件slick实现响应式移动端幻灯片图片切换特效
Apr 12 Javascript
AngularJS 2.0新特性有哪些
Feb 18 Javascript
javascript函数中的3个高级技巧
Sep 22 Javascript
HTML页面定时跳转方法解析(2种任选)
Dec 22 Javascript
Angular之指令Directive用法详解
Mar 01 Javascript
React简单介绍
May 24 Javascript
JS获取当前时间的实例代码(昨天、今天、明天)
Nov 13 Javascript
深入解析vue 源码目录及构建过程分析
Apr 24 Javascript
微信小程序顶部导航栏可滑动并选中放大
Dec 05 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中的观察者模式
2010/03/24 PHP
PHP中使用unset销毁变量并内存释放问题
2012/07/05 PHP
php FLEA中二叉树数组的遍历输出
2012/09/26 PHP
PHP5中Cookie与 Session使用详解
2013/04/30 PHP
js+php实现静态页面实时调用用户登陆状态的方法
2015/01/04 PHP
PHP JSON格式的中文显示问题解决方法
2015/04/09 PHP
php提取身份证号码中的生日日期以及验证是否为成年人的函数
2015/09/29 PHP
php文件上传及下载附带显示文件及目录功能
2017/04/27 PHP
laravel http 自定义公共验证和响应的方法
2019/09/29 PHP
Ruffy javascript 学习笔记
2009/11/30 Javascript
JavaScript高级程序设计 学习笔记 js高级技巧
2011/09/20 Javascript
jQuery获得指定元素坐标的方法
2015/04/14 Javascript
JavaScript实现获得所有兄弟节点的方法
2015/07/23 Javascript
jQuery实现区域打印功能代码详解
2016/06/17 Javascript
js省市区级联查询(插件版&amp;无插件版)
2017/03/21 Javascript
jquery ajaxfileupload异步上传插件
2017/11/21 jQuery
JS基于贪心算法解决背包问题示例
2017/11/27 Javascript
基于Vue开发数字输入框组件
2017/12/19 Javascript
Intellij IDEA搭建vue-cli项目的方法步骤
2018/10/20 Javascript
微信小程序基础教程之worker线程的使用方法
2019/07/15 Javascript
vue遍历对象中的数组取值示例
2019/11/07 Javascript
Python for Informatics 第11章之正则表达式(四)
2016/04/21 Python
Python爬虫实例爬取网站搞笑段子
2017/11/08 Python
python实现简单tftp(基于udp协议)
2018/07/30 Python
python利用pandas将excel文件转换为txt文件的方法
2018/10/23 Python
python输出结果刷新及进度条的实现操作
2020/07/13 Python
python利用递归方法实现求集合的幂集
2020/09/07 Python
PyTorch 中的傅里叶卷积实现示例
2020/12/11 Python
详解使用scrapy进行模拟登陆三种方式
2021/02/21 Python
欧洲著名的珠宝和手表网上商城:uhrcenter
2017/04/10 全球购物
公司会计岗位职责
2014/02/13 职场文书
《青山处处埋忠骨》教学反思
2014/04/22 职场文书
个人工作能力自我评价
2015/03/05 职场文书
Mysql Show Profile
2021/04/05 MySQL
MySQL性能压力基准测试工具sysbench的使用简介
2021/04/21 MySQL
利用js实现简单开关灯代码
2021/11/23 Javascript