Angular7中创建组件/自定义指令/管道的方法实例详解


Posted in Javascript onApril 02, 2019

组件

使用命令创建组件

•创建组件的命令:ng generate component 组件名
•生成的组件组成: 组件名.html 、组件名.ts、组件名.less、组件名.spec.ts
•在组件的控制器

@Component({
 selector: 'app-heroes',
 templateUrl: './heroes.component.html',
 styleUrls: ['./heroes.component.less']
})

手动创建组件

1.创建一个组件ts文件

2.在组件中设置

// 1. 导入包,按需导入
import { Component } from "@angular/core";
import { CoreEdit, NavLayoutComponent } from "@reco/core";
import { DinerService } from "../Service";

// 2.定义当前组件的修饰器
@Component({
 // 支出对外使用的名称
 selector: "diner-birth",
 // 使用的模板
 templateUrl: "./diner.birth.html"
})

// 导出使用的类
export class DinerBirthComponent extends CoreEdit {
 constructor(
 private _dinerService: DinerService,
 layout: NavLayoutComponent
 ) {
 super(_dinerService, 'diner-birth', layout);
 }
}

1.在index.ts文件中引入并导出

// 1. 导入
import { DinerBirthComponent } from "./diner.birth";

// 2. 导出
export { DinerBirthComponent }

// 3. 注册
@NgModule({
 // 这里列出的 NgModule 所导出的可声明对象可用在当前模块内的模板中
 imports: [....],

 // declarations:[ 组件 ] 属于该模块的一组组件、指令和管道(统称可声明对象)。
 // 注意点:在这个源数据中只能声明组件、管道、指令
 declarations: [DinerBirthComponent],

 // 定义此 NgModule 中要编译的组件集,这样它们才可以动态加载到视图中。
 entryComponents: [....],

 // 导出的模块
 exports: [....]
})

指令

认识指令

•说明:在 Angular 中有三种类型的指令: ◦1.组件 — 拥有模板的指令
◦2.结构型指令 — 通过添加和移除 DOM 元素改变 DOM 布局的指令
◦3.属性型指令 — 改变元素、组件或其它指令的外观和行为的指令。

自定义指令

•创建自定义指令的命令: ng g d 目录/指令名称

•创建指令

1.创建指令的文件ts文件

2.在指令文件中写

import { Directive, ElementRef, Input, Output } from '@angular/core';

// 自定义指令
@Directive({
 selector: '[dinerHidden]'
})
// 导出指令的模块
export class DinerHiddenDirective {
 // el 代表当前的元素
 constructor(el: ElementRef) {
 // console.log()
 el.nativeElement.style.display = "none"
 }
}
1.在index.ts中将该指令导入到ngModule中
// 1.导入
import { DinerHiddenDirective } from "./diner.hidden";

// 2.导出
export const DINER_COMPONENTS: Provider[] = [ DinerHiddenDirective ];

// 3.ngModule中注册
@NgModule({
 // 这里列出的 NgModule 所导出的可声明对象可用在当前模块内的模板中
 imports: [],

 // declarations:[ 组件 ] 属于该模块的一组组件、指令和管道(统称可声明对象)。
 // 注意点:在这个源数据中只能声明组件、管道、指令
 declarations: [DINER_COMPONENTS],
 // 定义此 NgModule 中要编译的组件集,这样它们才可以动态加载到视图中。
 entryComponents: []
})

1.在页面中引用

<!-- 隐藏当前的这个标签 -->
 <div class="form-group col-sm-6" dinerHidden>
  
 </div>

管道中的常用API

asyncPipe

•说明:async 管道会订阅一个 Observable 或 Promise,并返回它发出的最近一个值。 当新值到来时,async 管道就会把该组件标记为需要进行变更检测。当组件被销毁时,async 管道就会自动取消订阅,以消除潜在的内存泄露问题。

CurrencyPipe

•说明:把数字转换成金额字符串, 根据本地化规则进行格式化,这些规则会决定分组大小和分组分隔符、小数点字符以及其它与本地化环境有关的配置项。

DatePipe

•说明:把数字转换成金额字符串, 根据本地化规则进行格式化,这些规则会决定分组大小和分组分隔符、小数点字符以及其它与本地化环境有关的配置项。

DecimalPipe

•说明:把数字转换成字符串, 根据本地化规则进行格式化,这些规则会决定分组大小和分组分隔符、小数点字符以及其它与本地化环境有关的配置项。

自定义管道

•创建管道的命令:ng g pipe 目录/管道名称

•手动创建管道 •创建ts文件

import { Pipe, PipeTransform } from '@angular/core';

// 自定义管道 getGender
@Pipe({
 name: 'getGender'
})

// 创建的管道的类
export class GenderPipe implements PipeTransform {
 transform(value: string, exponent: string) {
 if (value == ' ') return "未知"
 return value === 'm' ? "男" : "女"
 }
}

•将这个管道添加到NgModuel中

// 1. 先导入
import { GenderPipe } from "./diner.gender";

// 2.导出 
export const DINER_COMPONENTS: Provider[] = [GenderPipe];

// 3.添加到NgModule中的
@NgModule({
 // 这里列出的 NgModule 所导出的可声明对象可用在当前模块内的模板中
 imports: [...],

 // declarations:[ 组件 ] 属于该模块的一组组件、指令和管道(统称可声明对象)。
 // 注意点:在这个源数据中只能声明组件、管道、指令
 declarations: [DINER_COMPONENTS],
 // 定义此 NgModule 中要编译的组件集,这样它们才可以动态加载到视图中。
 entryComponents: [...]
})

•在页面中引入使用

~
<!-- item.DGender的值为m和w,将对应的m转为男,w转为女 -->
<td>{{item.DGender | getGender}}</td>
~

总结

以上所述是小编给大家介绍的Angular7中创建组件/自定义指令/管道的方法实例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js 中将多个逗号替换为一个逗号的代码
Jun 07 Javascript
JavaScript 学习笔记之操作符(续)
Jan 14 Javascript
js点击列表文字对应该行显示背景颜色的实现代码
Aug 05 Javascript
jquery实现树形菜单完整代码
Dec 29 Javascript
莱鸟介绍window.print()方法
Jan 06 Javascript
js随机生成26个大小写字母
Feb 12 Javascript
springMVC结合AjaxForm上传文件
Jul 12 Javascript
使用JavaScript实现一个小程序之99乘法表
Sep 21 Javascript
Vue组件开发之LeanCloud带图形校验码的短信发送功能
Nov 07 Javascript
vue计算属性时v-for处理数组时遇到的一个bug问题
Jan 21 Javascript
vue.js与后台数据交互的实例讲解
Aug 08 Javascript
JS不要再到处使用绝对等于运算符了
Apr 30 Javascript
Node.js中package.json中库的版本号(~和^)
Apr 02 #Javascript
基于Vue插入视频的2种方法小结
Apr 02 #Javascript
vue踩坑记-在项目中安装依赖模块npm install报错
Apr 02 #Javascript
小程序实现自定义导航栏适配完美版
Apr 02 #Javascript
es6 symbol的实现方法示例
Apr 02 #Javascript
微信小程序设置全局请求URL及封装wx.request请求操作示例
Apr 02 #Javascript
Vue CLI 3.x 自动部署项目至服务器的方法
Apr 02 #Javascript
You might like
剧场版动画《PSYCHO-PASS 3 FIRST INSPECTOR》3月27日日本上映!
2020/03/06 日漫
一段php加密解密的代码
2007/07/16 PHP
apache和php之间协同工作的配置经验分享
2013/04/08 PHP
php邮箱地址正则表达式验证
2015/11/13 PHP
CMSPRESS 10行代码搞定 PHP无限级分类2
2018/03/30 PHP
JavaScript中几个重要的属性(this、constructor、prototype)介绍
2013/05/19 Javascript
js验证电话号码与手机支持+86的正则表达式
2014/01/23 Javascript
javascript下拉列表中显示树形菜单的实现方法
2015/11/17 Javascript
Angularjs material 实现搜索框功能
2016/03/08 Javascript
Vue.js每天必学之内部响应式原理探究
2016/09/07 Javascript
如何使用jquery实现文字上下滚动效果
2016/10/12 Javascript
jquery.flot.js简单绘制折线图用法示例
2017/03/13 Javascript
Vuex之理解Mutations的用法实例
2017/04/19 Javascript
JavaScript无操作后屏保功能的实现方法
2017/07/04 Javascript
元素全屏的设置与监听实例
2017/11/28 Javascript
浅谈es6中export和export default的作用及区别
2018/02/07 Javascript
JavaScript 日期时间选择器一些小结
2018/04/02 Javascript
详解使用mpvue开发github小程序总结
2018/07/25 Javascript
Bootstrap-table使用footerFormatter做统计列功能
2018/09/07 Javascript
vue-cli配置flexible过程详解
2019/07/04 Javascript
微信小程序项目总结之记账小程序功能的实现(包括后端)
2019/08/20 Javascript
Ant Design Pro 下实现文件下载的实现代码
2019/12/03 Javascript
Vue登录拦截 登录后继续跳转指定页面的操作
2020/08/04 Javascript
python实现爬虫下载美女图片
2015/07/14 Python
python中函数传参详解
2016/07/03 Python
浅谈python元素如何去重,去重后如何保持原来元素的顺序不变
2020/02/28 Python
vue.js刷新当前页面的实例讲解
2020/12/29 Python
HTML5 canvas实现移动端上传头像拖拽裁剪效果
2016/03/14 HTML / CSS
美国宠物商店:Wag.com
2016/10/25 全球购物
什么是重载?CTS、CLS和CLR分别做何解释
2012/05/06 面试题
竞聘医务工作人员的自我评价分享
2013/11/04 职场文书
爱情保证书范文
2014/02/01 职场文书
农村婚礼主持词
2014/03/13 职场文书
2014年党委工作总结
2014/11/22 职场文书
杨善洲电影观后感
2015/06/04 职场文书
2016天猫双十一广告语
2016/01/28 职场文书