angular8自定义管道、指令以及获取dom值
版本:
1、自定义管道:
example: 定义一个*ngFor 可以获取key值的管道
keyObject.pipe.ts
// key value 管道
import { Pipe, PipeTransform } from '@angular/core'; @Pipe({
name: 'getKeys'
}) export class keyValue implements PipeTransform {
transform(value, args: string[]): any {
let keys = [];
for (let key in Object.keys(value)) {
console.log(key);
keys.push({ key: key, value: value[key] });
}
return keys;
}
} // 使用操作
/*
step 1
app.module.ts 引入
import { keyValue } from './common/keyObject.pipe';
@NgModule({
declarations: [
keyValue,
],
step 2
// 循环的时候使用
// 原始值[{name: '', point: ''}]
// 转换的值[{key:0 , value:{name: '', point: ''}}]
<div *ngFor="let item of chipsList | getKeys">{{item.value.name}}<input type="number" step="0.01" min="0"
[value]="item.value.point" (change)="this.changeValue(item.key);" class="inputClass" /></div> */
2、自定义指令:
example:定义一个移入标签高光显示的指令
highLight.ts
// highlight指令
import { Directive, ElementRef, HostListener, Input } from '@angular/core'; @Directive({ selector: '[appHighlight]' }) export class HighlightDirective { @Input('appHighlight') highlightColor: string; //highlightColor是appHighlight指令的别名 constructor(private el: ElementRef) {
// el.nativeElement.style.backgroundColor = 'yellow';
}
private highlight(color: string) {
this.el.nativeElement.style.backgroundColor = color;
}
@HostListener('mouseenter') onMouseEnter() {
this.highlight(this.highlightColor);
} @HostListener('mouseleave') onMouseLeave() {
this.highlight(null);
}
} // 使用操作
/*
step 1
app.module.ts 引入
import {HighlightDirective} from './common/highLight';
@NgModule({
declarations: [
HighlightDirective,
],
step 2
对某标签使用高光
this.color = 'yellow'; // ts文件定义颜色
<p [appHighlight] = "color"></p> */
3、使用原生html dom的内容
example: 获取input框的value值
原来的写法:document.getElementsByClassName('inputClass')[index]).value 值可以获取到,但是控制台会输出error,而且打包会失败
正确的写法:<HTMLInputElement>document.getElementsByClassName('inputClass')[index]).value 这样也可以获取到值,控制台没有error,打包也不会报错
同理 获取image 的src 属性 <HTMLImageElement>
angular8自定义管道、指令以及获取dom值的更多相关文章
- Vue自定义指令获取DOM元素
我们知道,Vue.js的核心是数据驱动,当数据有所变化时,DOM就会被更新,比如: <span v-text="msg"></span> export de ...
- vue 获取dom的css属性值
<template> <div id="topInfo" ref="topInfo" style="width: 200px;hei ...
- attr prop jquery关于获取DOM属性值的两个函数
$('#domid').attr('acitve') $('#domid').prop('checked') // 在使用JQUERY获取DOM元素的属性时,有两个函数,attr 和 prop < ...
- C# 如何获取自定义的config中节点的值,并修改节点的值
现定义一个方法 DIYConfigHelper.cs using System; using System.Xml; using System.Configuration; using System. ...
- (四)Jsoup 获取 DOM 元素属性值
第一节: Jsoup 获取 DOM 元素属性值 Jsoup获取DOM元素属性值 比如我们要获取博客的href属性值: 我们这时候就要用到Jsoup来获取属性的值 : 我们给下示例代码: package ...
- vue 组件传递值以及获取DOM元素的位置信息
1.父组件 select_li.vue 1.1 父组件模板 <template> <div id='selectLi' ref="selectLi"> &l ...
- 获取get值&DOM例题
获取get值: <body> <form action="9.26获取get值.html" method="get"> ...
- vue(4)—— vue的过滤器,监听属性,生命周期函数,获取DOM元素
过滤器 vue允许自定义过滤器,我个人认为,过滤器有两种,一种是对数据的清洗过滤,一种是对数据切换的动画过滤 数据切换的动画过滤 这里还是利用前面的动态组件的例子: 这里由于没办法展示动画效果,代码如 ...
- html 跳转页面传参、点击获取DOM参数
虽然现在前端框架已经很多,尤其是几大流行框架,比如Vue,React,Angular 等,已经去DOM化,但是还是有很多公司仍在使用 HTML + CSS + JS . 这里记载一下用到的HTML传参 ...
随机推荐
- Caused by: com.mysql.jdbc.exceptions.jdbc4.MySQLSyntaxErrorException: REFERENCES command denied to user 'nali'@'localhost' for table 'dbs'
按照教程 Install hive on Mac with Homebrew,在 mac 上安装 Hive 时, 最后执行 hive 命令后,出现错误: Exception in thread &qu ...
- [Coursera][计算导论与C语言基础][Week 10]对于“数组应用练习”课后习题的思考题的一些想法
(首先,关于Honor Code,我咨询过了Help Center,分享课后练习的思考题的想法是可以的(注意不是代码),但要标明引用,引用格式来源于https://guides.lib.monash. ...
- iOS开发动画(Animation)总结
UIView的,翻转.旋转,偏移,翻页,缩放,取反的动画效果 翻转的动画 //开始动画 [UIView beginAnimations:@"doflip" context:ni ...
- 打开TXT文件并显示
<!DOCTYPE html> <html> <head> <title></title> <script> function ...
- 表格数据js初始绑定
html调用js文件,js初始化时发送Ajax请求,获取页面数据将其写入在html页面上展示 html <div class="card-body"> <!-- ...
- java面试题干货51-95
51.类ExampleA继承Exception,类ExampleB继承ExampleA. 有如下代码片断: try { throw new ExampleB("b") } catc ...
- 一个我经常用到的采集网页数据抓取网页获取数据的PHP函数类
class get_c_str { var $str; var $start_str; var $end_str; var $start_pos; var $end_pos; var $c_str_l ...
- JS---最终版本--封装缓动(变速)动画函数---增加任意多个属性&回调函数&层级&透明度
封装缓动(变速)动画函数---增加任意多个属性&回调函数&层级&透明度 相较之前的,增加了2个判断,第一个判断是不是透明度,第二个判断是不是zindex, 都不是,就只是普通属 ...
- js截取指定字符前面或后面的内容
function getCaption(obj,state) { var index=obj.lastIndexOf("\-"); if(state==0){ obj=obj.su ...
- JS---BOM基本知识 (顶级对象,系统对话框,加载事件,location对象, history对象, navigator对象)
BOM JavaScript分三个部分: 1. ECMAScript标准---基本语法 2. DOM--->Document Object Model 文档对象模型,操作页面元素的 3. BOM ...