input和output哪个是充电_Angular2中Input和Output用法及示例
Input相当于指令的值绑定,无论是单向的(@)还是双向的(=)。丢失将父作用域的值“输入”到子作用域中, 然后子作用域进行相关处理。
Output 相当于指令的方法绑定,子作用域触发事件执行响应函数, 而响应函数方法体则位于父作用域中, 相当于将事件“输出”到父作用域中, 在父作用域中处理。
看个angular2示例吧,我们自定义一个numberInput component,获取父作用域的值或者属性,然后在鼠标离开的时候调用父组件的方法验证
import {
Component, Input, Output, OnInit, ExistingProvider, forwardRef,
AfterViewInit, ElementRef, ViewChild, ViewContainerRef, ChangeDetectorRef, Optional, EventEmitter
} from'@angular/core'import {
NgModel, ControlValueAccessor, NG_VALUE_ACCESSOR, NgForm, FormControl,
ValidatorFn, ValidationErrors
} from'@angular/forms'import { InputBase, existingProvider } from'../../inputBase'import { Observable } from'rxjs'declarevar$: any;
@Component({
selector:'cm-number',
templateUrl:'numberInput.component.html',
styleUrls: ["./numberInput.component.css"],
providers: [existingProvider(NumericInputComponent)]
})
export class NumericInputComponent extends InputBase implements OnInit {
@ViewChild("input")
input: ElementRef;
ngOnInit() {
Observable.merge(
Observable.fromEvent(this.input.nativeElement, "input"),
Observable.fromEvent(this.input.nativeElement, "blur"),
Observable.fromEvent(this.input.nativeElement, "change")
).subscribe(e=>{
e.stopPropagation();
e.stopImmediatePropagation();
let p=e.target as HTMLInputElement;
let val= this.format(p.value);if (val !==p.value) {
p.value=val;
}if (val != this.model.value) {if (val == undefined || val.trim() === "") {this.onChange(undefined);
}else{this.onChange(parseFloat(val));
}
}
});if (this.model != null) {var fn: ValidatorFn = (c) =>{var errors: ValidationErrors ={};if ((this.hasEqualOperatorForMin && parseFloat(this.internalValue) < parseFloat(this.min.toString()))|| (!this.hasEqualOperatorForMin && parseFloat(this.internalValue) <= parseFloat(this.min.toString()))|| parseFloat(this.internalValue) > parseFloat(this.max.toString())) {
errors.dose= true;
}returnerrors;
}this.model.control.setValidators(fn);
}
}
private get internalValue() {
let val= (this.input.nativeElement).value;if (!val) returnundefined;
val=val.trim();if (val == "") returnundefined;returnval;
}
private format(val: string) {while (true) {
let newVal= val.replace(/[^0-9.-]/g, '');if (this.allowFloat) {
newVal= newVal.replace(/(\..*)\./g, '$1');
}else{
newVal= newVal.replace(/(.*)\./g, '$1');
}if (!this.allowNegative) {
newVal= newVal.replace(/-/g, '');
}else{
newVal= newVal.replace(/^-(-.*)/g, '$1');
newVal= newVal.replace(/(.+)-/g, '$1');
}
newVal= newVal.replace(/^0+([0-9].*)/g, '$1');
newVal= newVal.replace(/^0+(0\..*)/g, '$1');if (newVal === val) break;
val=newVal;
}returnval;
}
public _value: string;
@Input() maxlength: number;
@Input() readonly:boolean = false;
@Input() allowFloat:boolean = true;
@Input() min: number= 0;
@Input() max: number= 99999;@Input()
public get value() {return this._value;
}
public set value(val: string) {this._value =val;if (val == undefined || val.trim() == "") {this.onChange(undefined);
}else{this.onChange(parseFloat(this._value));
}
}
public writeValue(obj: any) {
obj= obj == undefined ? "": obj;
(this.input.nativeElement as HTMLInputElement).value =obj;
}
@Output()
public onblur: EventEmitter = new EventEmitter();
blur(e: Event) {this.onblur.emit($(e.target).val());
}
}
就举一个例子:
我们在父作用域中使用的时候, 可以这样赋值:
其实number input component 中, 我们会根据 allowFloat 的值,来决定是否允许输入小数。
ok, 以上是Input的示例。
Output一般都是一个EventEmitter的实例,使用实例的emit方法将参数emit到父组件中,触发父组件的事件。
然后父组件监听到该事件的发生,执行对应的处理函数。
这里之所以要自定义一次 blur 事件(EventEmitter), 是因为在 ngOnInit()中已经对blur 事件做过处理,这样父控件中就会被阻止掉,如果父控件中要用到blur 事件的话, 就可以用这种方式来做,我们自定义一个叫onBlur 的事件,然后在父控件中去实现内部逻辑。
是不是很简单啊。
input和output哪个是充电_Angular2中Input和Output用法及示例相关推荐
- input和output哪个是充电_html中input和output的区别?糊涂了搞不清了。哪位给解说下...
展开全部 标签定义不同类型的输出,比如脚本的e68a84e8a2ad3231313335323631343130323136353331333366303161输出,是 HTML 5 中的新标签,支持 ...
- 掌握shell编程中数组的常见用法及示例
From: http://www.embeddedlinux.org.cn/html/jishuzixun/201211/19-2386.html 给大家分享下数组的用法小例子,希望能给大家一点帮助. ...
- 轻松掌握shell编程中数组的常见用法及示例
缘起:在老男孩进行linux培训shell编程教学中,发现不少水平不错的网友及同学对数组仍然很迷糊,下面就给大家分享下数组的用法小例子,希望能给大家一点帮助.其实SHELL的数组很简单,好用.我们学习 ...
- 下列哪项不属于Html5中input,以下哪项不属于 Html5 中 input 标签新增的输入类型?...
[单选题]用一种药物作为主药,配合其它药物来提高主药的功效属于哪种配伍方法 [单选题]一般而言,能充分发挥队员速度快.体力好.灵活性好的特点的防守战术是( ). [判断题]露天开采的工艺系统主要有间断 ...
- python中input是什么意思_python input是什么意思
Python是一种解释型.面向对象.动态数据类型的高级程序设计语言.Python由Guido van Rossum于1989年底发明,第一个公开发行版发行于1991年.像Perl语言一样, Pytho ...
- Struts2中<s:iterator>基本用法及示例
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. Struts2中<s:iterator>基本用法及示例 Iterator用于遍历集合(j ...
- python命令行输入函数回退_Python2 中 input() 和 raw_input() 的区别
在 Python2 中如要想要获得用户从命令行的输入,可以使用 input() 和 raw_input() 两个函数,那么这两者有什么区别呢? 我们先借助 help 函数来看下两者的文档注释: > ...
- torchsummary 中input size 异常的问题
爪爪熊原创文章----谢绝转载 本文解决问题: torchsummary针对多个输入模型的时候,其输出信息中input size等存在着错误,这里提供方案解决这个错误. 当我们使用pytorch搭建好 ...
- Html中input标签的详解
今天来给大家讲解一下input标签的内部属性: 直接开门见山,首先我们先看input标签的第一个属性type: 1.type 格式:type="文本的类型" 当type设置为tex ...
- HTML中input标签使用法汇总
HTML input标签的属性: 1.type:该属性是input标签里唯一的必须输入的属性,当然,也可以不填,默认为type = "text".具体它有那些值,我们后面再讨论. ...
最新文章
- 【NLP】 NLP领域最具影响力的国内外会议介绍
- 进入保护模式(三)——《x86汇编语言:从实模式到保护模式》读书笔记17
- JVM源码阅读-Dalvik类的加载
- 2020 操作系统第三天复习(知识点总结)
- percona+mysql插件_使用percona mysql插件来监控mysql5.7
- JavaScript高级程序设计20.pdf
- 华为k662c的虚拟服务器,华为k662c路由器怎么设置
- 机器学习 模型性能评估_如何评估机器学习模型的性能
- 【预测模型】基于matlab RLS算法预测【含Matlab源码 222期】
- Ubuntu锐捷校园网连接不上问题,认证成功但是上不去网。
- 一键生成自签名证书,为内网IP配置HTTPS访问来使用navigator.getUserMedia录音
- cups共享linux打印机_Linux使用CUPS实现网络打印机
- 计算机网络按网络的传输介质分类可以分为:广域网和无线网两种.,常用的网络传输介质类别和各自特点...
- 怎样实现在微信中直接下载APK
- 干货分享 | 最新机器学习视频教程与数据集下载(持续更新......)
- 图像修复:专栏博文推荐查阅顺序
- gtsam Overview
- 蓝桥杯-【交换瓶子】【2016年省赛B组题解】【C++】
- 高德地图使用-监听地图缩放
- C Primer Plus 学习打卡之第二章(含课后编程答案)