今天完成的事情
学习了管道，完成了js7中自定义管道模块
app根目录里下新建一个模块，用于绑定管道，其他模块想要使用管道的时候直接引入模块然后使用即可
1.这里我新建了一个pipes模块，然后再模块下新建all管道并直接创建xxxx.constant.ts文件
ng g pipe pages/pipes/all --skip-import
2.由于这里我需要自定义两个管道，所以修改了默认生成的一个管道然后新建了一个管道
import { Pipe, PipeTransform } from '@angular/core';
import { status,type} from './all.constant'
@Pipe({
name: 'status' //这是管道名字
})
export class statusPipe implements PipeTransform { //pipes.module模块中引入的是class后面的名字
transform(value: any, ...args: any[]): any {
//这是修改之前的 return null;
return status.list1[value];
//这里return 返回status对象里面的list1对象的key值
//如果这里的value，也就是对象里的value不是数字类型，比如是字符串，那么这里就可以使用 . 而不是 []
}
}
// --------------------------分割线------------------------------
@Pipe({
name: 'type'
})
export class TypePipe implements PipeTransform {
transform(value: any, ...args: any[]): any {
//这是修改之前的 return null;
return type.list2.value];
}
}
3.在pipes模块内导入，声明，暴露新建的管道
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { StatusPipe,TypePipe } from './all.pipe'; //引入新建的模块
@NgModule({
declarations: [ StatusPipe,TypePipe ], //声明新建的模块
imports: [
CommonModule
],
exports:[ StatusPipe,TypePipe ] //暴露新建的模块
})
export class PipesModule { }
4.在xxxx.constant.ts文件内按照接口的约定进行编辑
export const status = {
list1: {
1: "草稿",
2: "上线"
}
}
export const type = {
list2: {
0: "首页banner",
1: "找职位banner",
2: "找精英banner",
3: "行业大图"
}
}
5.在管道的ts文件内引入第4步编辑好的文件，并在return语句内取出数据，详情参考步骤2内的加粗绿色文字
6.在需用使用到管道的模块内引入并import管道相关联的模块，之后就可以使用管道了，如下所示
<td>{{ item.type | type }}</td>
<td>{{ item.status | status }}</td>
今天遇到的问题
问题：今天在使用ngmodel双向数据绑定的时候，不停的报错，又看不懂报的什么错误
解决：使用双向数据绑定，需要引入forms模块并声明才能使用
import { FormsModule } from '@angular/forms';
然后想起来这不是吧第一次忘了引入forms模块了。
这里顺便提一下
使用ngfor和ngif语句，在模块内需要引入公共模块
import { CommonModule } from '@angular/common';
1.每个模块会首先加载自己的组件以及路由
2.加载完后路由进行匹配，若需要设置为空时，加载组件本身，则需要引入组件本身
3.app模块如果要使用自定义模块内的组件，可以使用懒加载，如果不用懒加载，则手动引入自定义模块并import，之后就可以使用自定义模块中的组件了
今天的收获
1.学习了管道的相关知识，并且使用自定义管道完成了任务要求部分
2.有时候使用相关的模块，需要引用模块进来并且声明才能使用的，这个错误已经犯了很多次了，要长记性！！！
明天的计划
完成js7的数据搜索功能
返回列表
评论