Angular2 (RC4) 路由与导航详解  更新时间:2016年09月21日 11:01:43   作者:Yeaseon   这篇文章主要介绍了Angular2 (RC4) 路由与导航的相关资料,需要的朋友可以参考下 基础知识 1. 大多数带路由的应用都要在 index.html 的 标签下添加一个 元素。 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. 上面的配置完成后,当 URL 变为 /heroes时,路由器就会匹配到path为heroes的Route,并且在宿主视图中的中显示HeroListComponent组件。 5.[routerLink] 我们在标签中添加了routerLink指令,可以一次性绑定到我们路由中的path值。 如果routerLink想要绑定动态信息,我们就可以把它绑定到一个能够返回路由链接数组的模板表达式上。路由器最终会把此数组解析成一个 URL 和一个组件视图。 我们还可以往中添加一个routerLinkActive指令,用于在相关的routerLink被激活时所在元素添加或移除CSS类。该指令可以直接添加到该元素上,也可以直接添加到其父元素上。 AppComponent模板 template: ` Component Router Crisis Center Heroes `, 6.路由器状态 在每个导航的生命周期完成时,路由器会构建出一个 ActivatedRoute组成的树,它表示路由器的当前状态。我们可以在应用中任何使用 Router服务及其 routerState属性来访问当前的RouterState值。 7.ROUTER_DIRECTIVES RouterLink、RouterLinkActive和RouterOutlet是ROUTER_DIRECTIVES集合中的指令,所以需要在@Component元数据中加入到directives数组中。 directives: [ROUTER_DIRECTIVES] 以上就是对Angular2 (RC4) 路由与导航的资料整理,后续继续补充相关资料,谢谢大家对本站的支持! 您可能感兴趣的文章: angular实现导航菜单切换 AngularJS+Bootstrap3多级导航菜单的实现代码 Angular2 之 路由与导航详细介绍 Angular2 (RC5) 路由与导航详解 Angular实现二级导航栏 Angular2 RC4 路由 导航 相关文章 Angular 4.x+Ionic3踩坑之Ionic3.x pop反向传值详解 这篇文章主要给大家介绍了关于Angular 4.x+Ionic3踩坑之Ionic3.x pop反向传值的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。 2018-03-03 angularjs1.X 重构controller 的方法小结 这篇文章主要介绍了angularjs1.X 重构controller 的方法小结,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下 2019-08-08 angular ngClick阻止冒泡使用默认行为的方法 这篇文章主要介绍了angular ngClick阻止冒泡使用默认行为的方法,较为详细的分析了AngularJS中ngClick事件执行原理与阻止冒泡的实现技巧,需要的朋友可以参考下 2016-11-11 如何在Angular应用中创建包含组件方法示例 这篇文章主要给大家介绍了关于如何在Angular应用中创建包含组件的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用Angular具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧 2019-03-03 详解AngularJS1.x学习directive 中‘& ’‘=’ ‘@’符号的区别使用 这篇文章主要介绍了详解AngularJS1.x学习directive 中‘& ’‘=’ ‘@’符号的区别使用,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。 2017-08-08 Angular 2父子组件数据传递之局部变量获取子组件其他成员 这篇文章主要给大家介绍了关于Angular 2父子组件之间数据传递之局部变量获取子组件其他成员的相关资料,文中通过示例代码介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。 2017-07-07 AngularJS的ng Http Request与response格式转换方法 这篇文章主要介绍了AngularJS的ng Http Request与response格式转换方法,结合实例形式分析了AngularJS实现Request与response格式转换操作的相关设置与使用技巧,需要的朋友可以参考下 2016-11-11 angularjs实现简单的购物车功能 这篇文章主要为大家详细介绍了angularjs实现简单的购物车功能 ,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 2017-09-09 angularjs中使用ng-bind-html和ng-include的实例 下面小编就为大家带来一篇angularjs中使用ng-bind-html和ng-include的实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-04-04 基于AngularJs + Bootstrap + AngularStrap相结合实现省市区联动代码 这篇文章主要给大家介绍基于AngularJs + Bootstrap + AngularStrap相结合实现省市区联动的实例代码,非常不错具有参考借鉴价值,感兴趣的朋友一起看看吧 2016-05-05 最新评论

基础知识

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

您可能感兴趣的文章:

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