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 相关文章推荐
JavaScript实现简单的时钟实例代码
Nov 23 Javascript
jQuery ui实现动感的圆角渐变网站导航菜单效果代码
Aug 26 Javascript
Bootstrap CDN和本地化环境搭建
Oct 26 Javascript
微信小程序开发经验总结(推荐)
Jan 11 Javascript
使用JS 插件qrcode.js生成二维码功能
Feb 20 Javascript
深入理解JavaScript和TypeScript中的class
Apr 22 Javascript
在Vue中获取组件声明时的name属性方法
Sep 12 Javascript
vue-cli 打包后提交到线上出现 &quot;Uncaught SyntaxError:Unexpected token&quot; 报错
Nov 06 Javascript
Vuex中的State使用介绍
Jan 19 Javascript
谈谈为什么你的 JavaScript 代码如此冗长
Jan 30 Javascript
vue + node如何通过一个Txt文件批量生成MP3并压缩成Zip
Jun 02 Javascript
vue 使用async写数字动态加载效果案例
Jul 18 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
不用数据库的多用户文件自由上传投票系统(1)
2006/10/09 PHP
解决cPanel无法安装php5.2.17
2014/06/22 PHP
CI框架中cookie的操作方法分析
2014/12/12 PHP
php阿拉伯数字转中文人民币大写
2015/12/21 PHP
PHP使用fopen与file_get_contents读取文件实例分享
2016/03/04 PHP
YII2自动登录Cookie总是失效的解决方法
2017/06/28 PHP
PHP如何通过date() 函数格式化显示时间
2020/11/13 PHP
jQuery学习7 操作JavaScript对象和集合的函数
2010/02/07 Javascript
javascript使用数组的push方法完成快速排序
2014/09/15 Javascript
jQuery固定浮动侧边栏实现思路及代码
2014/09/28 Javascript
jQuery常用知识点总结以及平时封装常用函数
2016/02/23 Javascript
JavaScript鼠标事件,点击鼠标右键,弹出div的简单实例
2016/08/03 Javascript
KnockoutJS 3.X API 第四章之表单submit、enable、disable绑定
2016/10/10 Javascript
bootstrap css样式之表单
2017/01/19 Javascript
IE11下处理Promise及Vue的单项数据流问题
2019/07/24 Javascript
js实现图片粘贴到网页
2019/12/06 Javascript
python实现带验证码网站的自动登陆实现代码
2015/01/12 Python
老生常谈Python startswith()函数与endswith函数
2017/09/08 Python
python生成tensorflow输入输出的图像格式的方法
2018/02/12 Python
用python画一只可爱的皮卡丘实例
2019/11/21 Python
Matplotlib绘制雷达图和三维图的示例代码
2020/01/07 Python
scrapy与selenium结合爬取数据(爬取动态网站)的示例代码
2020/09/28 Python
Scrapy实现模拟登录的示例代码
2021/02/21 Python
详解HTML5 LocalStorage 本地存储
2016/12/23 HTML / CSS
HTML5里autofocus自动聚焦属性使用介绍
2016/06/22 HTML / CSS
h5移动端调用支付宝、微信支付的实现
2020/06/08 HTML / CSS
澳大利亚票务和娱乐市场领导者:Ticketmaster
2017/03/03 全球购物
洛杉矶时尚女装系列:J.ING US
2019/03/17 全球购物
vue实现倒计时功能
2021/03/24 Vue.js
教师演讲稿开场白
2014/08/25 职场文书
2014年最新领导班子整改方案
2014/09/27 职场文书
工作失职检讨书范文
2015/05/05 职场文书
工作迟到检讨书范文
2015/05/06 职场文书
Django项目配置Memcached和Redis, 缓存选择哪个更有优势
2021/04/06 Python
详解在OpenCV中如何使用图像像素
2022/03/03 Python
win10键盘驱动怎么修复?Win10键盘驱动修复小技巧
2022/04/06 数码科技