Angular2 (RC5) 路由与导航详解  更新时间:2016年09月21日 11:07:59   作者:Yeaseon   这篇文章主要介绍了Angular2 (RC5) 路由与导航的相关资料,需要的朋友可以参考下 之前总结过RC4的路由配置,Angular2升级RC5之后增加了NgModule和RouterModule等等很多组件,所以现在的路由配置方式也变化比较大。 1. 大多数带路由的应用都要在 index.html 的 标签下顶部添加一个元素。 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: ` Dashboard Heroes ` 我们在标签中添加了routerLink指令,可以一次性绑定到我们路由中的path值。 如果这个URL的path和routerLink匹配,就把映射到的组件在中显示。 我们还可以往中添加一个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指令和等等。详情见我写过的RC4的路由配置方式。 以上就是对Angular2 (RC5) 路由与导航的资料整理,后续继续补充相关资料,谢谢大家对本站的支持! 您可能感兴趣的文章: angular实现导航菜单切换 AngularJS+Bootstrap3多级导航菜单的实现代码 Angular2 之 路由与导航详细介绍 Angular2 (RC4) 路由与导航详解 Angular实现二级导航栏 Angular2 RC5 路由 导航 相关文章 Angular实现svg和png图片下载实现 这篇文章主要介绍了Angular实现svg和png图片下载实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧 2019-05-05 AngularJS中的Promise详细介绍及实例代码 这篇文章主要介绍了AngularJS中的Promise详细介绍及实例代码的相关资料,Promise是一种模式,以同步操作的流程形式来操作异步事件,避免了层层嵌套,可以链式操作异步事件,需要的朋友可以参考下 2016-12-12 Angular.js中window.onload(),$(document).ready()的写法浅析 这篇文章主要介绍了Angular.js中window.onload(),$(document).ready()的写法浅析,需要的朋友可以参考下 2017-09-09 给angular加上动画效遇到的问题总结 本文给大家总结了一下在angular中给ng-repeat列表加上动画效果时所遇到的问题及解决方法,推荐给大家,希望大家能够喜欢。 2016-02-02 Angular页面间切换及传值的4种方法 这篇文章主要为大家详细介绍了Angular页面间切换及传值的四种方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 2016-11-11 AngularJS ng-app 指令实例详解 本文主要介绍AngularJS ng-app 指令,这里整理了ng-app指令的一些资料,并附实例代码,有需要的小伙伴可以参考下 2016-07-07 Angular4 反向代理Details实践 本篇文章主要介绍了Angular4 反向代理Details实践,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-05-05 angular6 利用 ngContentOutlet 实现组件位置交换(重排) 这篇文章主要介绍了angular6 利用 ngContentOutlet 实现组件位置交换(重排),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-11-11 Angular+Node生成随机数的方法 这篇文章主要介绍了Angular+Node生成随机数的方法,结合具体实例分析了Angular与Node结合控制前后端实现随机数功能的相关操作技巧,需要的朋友可以参考下 2017-06-06 AngularJS实现的根据数量与单价计算总价功能示例 这篇文章主要介绍了AngularJS实现的根据数量与单价计算总价功能,涉及AngularJS事件响应与数值运算相关操作技巧,需要的朋友可以参考下 2017-12-12 最新评论

之前总结过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) 路由与导航的资料整理,后续继续补充相关资料,谢谢大家对本站的支持!

您可能感兴趣的文章:

  • angular实现导航菜单切换
  • AngularJS+Bootstrap3多级导航菜单的实现代码
  • Angular2 之 路由与导航详细介绍
  • Angular2 (RC4) 路由与导航详解
  • Angular实现二级导航栏
张贴在3