前端框架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 class OptypePipe implements PipeTransform {    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 const reqtmpRouting = 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}, // 查看功能模板    ]}]);
根据path的路径，跳转到对应的component,根据component找到对应的页面，对于路由传参，如：
path: 'function/art/:art_id/:t'，然后对应页面通过：
this.activatedRoute.params.subscribe(param => {    if (param && param.art_id) {        this.getByArtId(param.art_id);    }});拿到路由所传递的参数。