Angular input控件的click事件表达式如何被转换成JavaScript函数
时间:2022-07-26
本文章向大家介绍Angular input控件的click事件表达式如何被转换成JavaScript函数,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
源代码:
<button (click)="toggle($event)">隐藏/显示</button>
这个表达式toggle($event),如何被Angular转换成的JavaScript函数呢?
通过调试,找到Angular视图渲染的地方:
renderView和executeTemplate:
下面这个函数就是将表达式转换成Angular JavaScript listener的地方:
/**
* Adds an event listener to the current node.
*
* If an output exists on one of the node's directives, it also subscribes to the output
* and saves the subscription for later cleanup.
*
* @codeGenApi
* @param {?} eventName Name of the event
* @param {?} listenerFn The function to be called when event emits
* @param {?=} useCapture Whether or not to use capture in event listener
* @param {?=} eventTargetResolver Function that returns global target information in case this listener
* should be attached to a global object like window, document or body
*
* @return {?}
*/
function ɵɵlistener(eventName, listenerFn, useCapture = false, eventTargetResolver) {
/** @type {?} */
const lView = getLView();
/** @type {?} */
const tView = getTView();
/** @type {?} */
const tNode = getPreviousOrParentTNode();
listenerInternal(tView, lView, lView[RENDERER], tNode, eventName, listenerFn, useCapture, eventTargetResolver);
return ɵɵlistener;
}
- 【Java学习笔记之十九】super在Java继承中的用法小结
- 【Java学习笔记之二十一】抽象类在Java继承中的用法小结
- 【Java学习笔记之二十】final关键字在Java继承中的用法小结
- 基于Windows下python环境变量配置
- 【机器学习笔记之七】PCA 的数学原理和可视化效果
- 2017"百度之星"程序设计大赛 - 复赛1005&&HDU 6148 Valley Numer【数位dp】
- 【专知-关关的刷题日记20】Leetcode 119. Pascal's Triangle II
- 2017"百度之星"程序设计大赛 - 复赛1003&&HDU 6146 Pokémon GO【数学,递推,dp】
- 2017"百度之星"程序设计大赛 - 复赛1001&&HDU 6144 Arithmetic of Bomb【java大模拟】
- Java面向对象抽象类实例练习
- 经典JS闭包面试题
- Java面向对象接口的应用实例练习
- 【机器学习笔记之八】使用朴素贝叶斯进行文本的分类
- 【Java学习笔记之二十二】解析接口在Java继承中的用法及实例分析
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Android中ActionBar和ToolBar添加返回箭头的实例代码
- Android自定义双向进度条的实现代码
- android视频截屏&手机录屏实现代码
- Android自定义组件跟随自己手指主动画圆
- Android RecyclerView 实现快速滚动的示例代码
- Android的八种对话框的实现代码示例
- Android使用RecyclerView实现今日头条频道管理功能
- Liunx(centos8)下的yum的基本用法和实例(推荐)
- Android中LeakCanary检测内存泄漏的方法
- Linux 查看磁盘IO并找出占用IO读写很高的进程
- Android实现简单的拨号器功能
- Android调用系统自带浏览器打开网页的实现方法
- Linux之删除带有空格的文件(不是目录)
- Android自定义AvatarImageView实现头像显示效果
- 如何使用win10内置的linux系统启动spring-boot项目