失眠网 > 前端框架angular学习笔记（二）

前端框架angular学习笔记（二）

时间：2019-02-12 15:14:57

相关推荐

前端框架angular学习笔记（二）

(1)管道：

通过引入Angular管道，我们可以把这种简单的“显示-值”转换器声明在HTML中。管道把数据作为输入，然后转换它，给出期望的输出。

例如：<p>The hero's birthday is {{ birthday | date }}</p>

在这个插值表达式中，我们让组件的birthday值通过管道操作符( | )流动到右侧的Date管道函数中。所有管道都会用这种方式工作。

angular内置管道：

Angular内置了一些管道，比如DatePipe、UpperCasePipe、LowerCasePipe、CurrencyPipe和PercentPipe。它们全都可以直接用在任何模板中。

自定义管道：

自定义管道首先要声明

@Pipe({name:'optypePipe'})

然后要实现

PipeTransform接口，之后完成接口里的transform（）方法，先看一个简单的完整实例：

import{Pipe, PipeTransform}from '@angular/core';@Pipe({name:'optypePipe'})export classOptypePipeimplementsPipeTransform {transform(op_type_id:number):any{if(op_type_id === 0) {return '操作类型名称';}if(op_type_id === 1) {return '编码';}}}

这个管道完成了根据操作id返回具体操作类型的管道转换。

（2）依赖注入令牌：

当向注入器注册提供商时，实际上是把这个提供商和一个 DI 令牌关联起来了。注入器维护一个内部的令牌-提供商映射表，这个映射表会在请求依赖时被引用到。令牌就是这个映射表中的键值。

在前面的所有例子中，依赖值都是一个类实例，并且类的类型作为它自己的查找键值。在下面的代码中，HeroService类型作为令牌，直接从注入器中获取HeroService实例：heroService: HeroService;

编写需要基于类的依赖注入的构造函数对我们来说是很幸运的。只要定义一个HeroService类型的构造函数参数， Angular 就会知道把跟HeroService类令牌关联的服务注入进来：constructor(heroService: HeroService)

（3）路由与导航：

路由被用于页面之间的跳转以及路由传递参数。

路由配置例子：

export constreqtmpRouting = RouterModule.forChild([{path:'',component: ReqtmpComponent,children: [{path:'',pathMatch:'full',redirectTo:'index'},{path:'index',component: ReqtmpIndexComponent},{path:'reward/search/:t',component: ReqtmpBarRewardComponent}, // 搜索酬金模板{path:'reward/add/:t',component: ReqtmpBarRewardEditComponent},// 新增酬金模板{path:'reward/edit/:id/:t',component: ReqtmpBarRewardEditComponent},// 编辑酬金模板{path:'reward/art/:art_id/:t',component: ReqtmpBarRewardEditComponent},// 查看酬金模板{path:'busiaya/search/:t',component: ReqtmpBarBusiayaComponent}, // 经分需求信息{path:'busiaya/add/:t',component: ReqtmpBarBusiayaEditComponent},// 新增经分需求信息{path:'busiaya/edit/:id/:t',component: ReqtmpBarBusiayaEditComponent},// 编辑经分需求信息{path:'busiaya/art/:art_id/:t',component: ReqtmpBarBusiayaEditComponent},// 查看经分模板{path:'charge/search/:t',component: ReqtmpBarChargeComponent}, // 经分需求信息{path:'charge/add/:t',component: ReqtmpBarChargeEditComponent},// 新增经分需求信息{path:'charge/edit/:id/:t',component: ReqtmpBarChargeEditComponent},// 编辑经分需求信息{path:'charge/art/:art_id/:t',component: ReqtmpBarChargeEditComponent},// 查看资费模板{path:'topic/search/:t',component: ReqtmpBarTopicComponent}, // 搜索模板基本信息{path:'comprehensive/search/:t',component: ReqtmpBarComprehensiveComponent}, // 综合需求模板{path:'elechanl/search/:t',component: ReqtmpBarElechanlComponent}, // 综合需求模板{path:'comprehensive/add/:t',component: ReqtmpBarComprehensiveEditComponent},// 新增综合模板{path:'comprehensive/edit/:id/:t',component: ReqtmpBarComprehensiveEditComponent},// 编辑综合模板{path:'comprehensive/art/:art_id/:t',component: ReqtmpBarComprehensiveEditComponent},// 查看综合模板{path:'elechanl/add/:t',component: ReqtmpBarElechanlEditComponent}, // 新增电渠模板{path:'elechanl/edit/:id/:t',component: ReqtmpBarElechanlEditComponent},// 编辑电渠模板{path:'elechanl/art/:art_id/:t',component: ReqtmpBarElechanlEditComponent},// 查看电渠模板{path:'market/search/:t',component: ReqtmpBarMarketComponent},// 营销类需求模板信息{path:'market/add/:t',component: ReqtmpBarMarketEditComponent},// 新增营销类需求模板信息{path:'market/edit/:id/:t',component: ReqtmpBarMarketEditComponent},// 编辑营销类需求模板信息{path:'market/art/:art_id/:t',component: ReqtmpBarMarketEditComponent},// 查看营销模板{path:'simpleparam/search/:t',component: ReqtmpBarSimppleParamComponent}, // 搜索简易模板{path:'simpleparam/add/:t',component: ReqtmpBarSimppleParamEditComponent},// 新增简易模板{path:'simpleparam/edit/:id/:t',component: ReqtmpBarSimppleParamEditComponent},// 编辑简易模板{path:'template/:art_id/:art_type/:t',component: ReqtmpBarTemplateComponent},// 总模板{path:'function/search/:t',component: ReqtmpBarFunctionComponent},// 搜索功能模板{path:'function/add/:t',component: ReqtmpBarFunctionEditComponent},// 新增功能模板{path:'function/edit/:id/:t',component: ReqtmpBarFunctionEditComponent},// 编辑功能模板{path:'function/art/:art_id/:t',component: ReqtmpBarFunctionEditComponent},// 查看功能模板]}]);