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 相关文章推荐
jquery+json 通用三级联动下拉列表
Apr 19 Javascript
统计出现最多的字符次数的js代码
Dec 03 Javascript
jQuery实现切换页面布局使用介绍
Oct 09 Javascript
jQuery实现跨域
Feb 03 Javascript
jquery实现textarea 高度自适应
Mar 11 Javascript
再次谈论React.js实现原生js拖拽效果引起的一系列问题
Apr 03 Javascript
Bootstrap实现渐变顶部固定自适应导航栏
Aug 27 Javascript
小程序click-scroll组件设计
Jun 18 Javascript
vue轮播组件实现$children和$parent 附带好用的gif录制工具
Sep 26 Javascript
vue 解除鼠标的监听事件的方法
Nov 13 Javascript
Vue如何实现监听组件原生事件
Jul 03 Javascript
js和jquery判断数据类型的4种方法总结
Aug 28 jQuery
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
PHP编码转换
2012/11/05 PHP
PHP 5.5 创建和验证哈希最简单的方法详解
2013/11/07 PHP
PHP制作图形验证码代码分享
2014/10/23 PHP
PHPExcel在linux环境下导出报500错误的解决方法
2017/01/26 PHP
PHP时间日期增减操作示例【date strtotime实现加一天、加一月等操作】
2018/12/21 PHP
javascript 极速 隐藏/显示万行表格列只需 60毫秒
2009/03/28 Javascript
JS实现多物体缓冲运动实例代码
2013/11/29 Javascript
Javascript中innerHTML用法实例分析
2015/01/12 Javascript
js操作cookie保存浏览记录的方法
2015/12/25 Javascript
使用Javascript实现选择下拉菜单互移并排序
2016/02/23 Javascript
第二篇Bootstrap起步
2016/06/21 Javascript
JQuery控制图片由中心点逐渐放大效果
2016/06/26 Javascript
使用Angular CLI从蓝本生成代码详解
2018/03/24 Javascript
使用sessionStorage解决vuex在页面刷新后数据被清除的问题
2018/04/13 Javascript
详解各版本React路由的跳转的方法
2018/05/10 Javascript
vue学习之Vue-Router用法实例分析
2020/01/06 Javascript
[14:51]DOTA2 HEROS教学视频教你分分钟做大人-卓尔游侠
2014/06/13 DOTA
[01:04:05]VG vs Newbee 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
[01:00:13]完美世界DOTA2联赛 LBZS vs Forest 第一场 11.07
2020/11/09 DOTA
盘点提高 Python 代码效率的方法
2014/07/03 Python
Python基于列表模拟堆栈和队列功能示例
2018/01/05 Python
Python爬虫使用Selenium+PhantomJS抓取Ajax和动态HTML内容
2018/02/23 Python
python看某个模块的版本方法
2018/10/16 Python
python 输出所有大小写字母的方法
2019/01/02 Python
python随机在一张图像上截取任意大小图片的方法
2019/01/24 Python
python代码能做成软件吗
2020/07/24 Python
CSS3实现伪类hover离开时平滑过渡效果示例
2017/08/10 HTML / CSS
html5 figure和figcaption的使用方法
2018/09/10 HTML / CSS
Spartoo英国:欧洲最大的网上鞋店
2016/09/13 全球购物
城市精细化管理实施方案
2014/03/04 职场文书
销售团队获奖感言
2014/08/14 职场文书
领导干部遵守党的政治纪律情况思想汇报
2014/09/14 职场文书
暑假社会实践证明格式
2014/10/28 职场文书
建国大业观后感600字
2015/06/01 职场文书
聊聊JS ES6中的解构
2021/04/29 Javascript
Golang 入门 之url 包
2022/05/04 Golang