Angular Component之间的事件通知机制
时间:2022-07-28
本文章向大家介绍Angular Component之间的事件通知机制,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
例子:book manage Component里有个app-search-input控件,通过searchEventEmitter发送事件给自己的searchEventHandler:
search input发送事件:
super是一个subject:
和event listener相关的函数:
/**
* Wraps an event listener with a function that marks ancestors dirty and prevents default behavior,
* if applicable.
*
* @param {?} tNode The TNode associated with this listener
* @param {?} lView The LView that contains this listener
* @param {?} listenerFn The listener function to call
* @param {?} wrapWithPreventDefault Whether or not to prevent default behavior
* (the procedural renderer does this already, so in those cases, we should skip)
* @return {?}
*/
function wrapListener(tNode, lView, listenerFn, wrapWithPreventDefault) {
// Note: we are performing most of the work in the listener function itself
// to optimize listener registration.
return (/**
* @param {?} e
* @return {?}
*/
function wrapListenerIn_markDirtyAndPreventDefault(e) {
// Ivy uses `Function` as a special token that allows us to unwrap the function
// so that it can be invoked programmatically by `DebugNode.triggerEventHandler`.
if (e === Function) {
return listenerFn;
}
// In order to be backwards compatible with View Engine, events on component host nodes
// must also mark the component view itself dirty (i.e. the view that it owns).
/** @type {?} */
const startView = tNode.flags & 2 /* isComponentHost */ ?
getComponentLViewByIndex(tNode.index, lView) :
lView;
// See interfaces/view.ts for more on LViewFlags.ManualOnPush
if ((lView[FLAGS] & 32 /* ManualOnPush */) === 0) {
markViewDirty(startView);
}
/** @type {?} */
let result = executeListenerWithErrorHandling(lView, listenerFn, e);
// A just-invoked listener function might have coalesced listeners so we need to check for
// their presence and invoke as needed.
/** @type {?} */
let nextListenerFn = ((/** @type {?} */ (wrapListenerIn_markDirtyAndPreventDefault))).__ngNextListenerFn__;
while (nextListenerFn) {
// We should prevent default if any of the listeners explicitly return false
result = executeListenerWithErrorHandling(lView, nextListenerFn, e) && result;
nextListenerFn = ((/** @type {?} */ (nextListenerFn))).__ngNextListenerFn__;
}
if (wrapWithPreventDefault && result === false) {
e.preventDefault();
// Necessary for legacy browsers that don't support preventDefault (e.g. IE)
e.returnValue = false;
}
return result;
});
}
最终被book manage的listener接收到:
- 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 数组属性和方法
- PAT (Basic Level) Practice (中文)1021 个位数统计 (15 分)
- PAT (Basic Level) Practice (中文)1049 数列的片段和 (20 分)
- PAT (Basic Level) Practice (中文)1022 D进制的A+B (20 分)
- [900]mysql字符串数字互转
- 技术分享 | Semi-join Materialization 子查询优化策略
- 前端性能和错误监控
- Network在单细胞转录组数据分析中的应用
- PAT (Basic Level) Practice (中文)1024 科学计数法 (20 分)
- PAT (Basic Level) Practice (中文)1053 住房空置率 (20 分)
- 解决vue+axios请求报错POST http: net::ERR_CONNECTION_REFUSED,在封装的请求中统一处理请求异常的问题
- PAT (Basic Level) Practice (中文)1025 反转链表 (25 分)
- Pytest+Allure接口自动化一些学习分享
- 数据结构___马踏棋盘详尽实现+报告+通俗易懂注释
- 使用elasticsearch-dump迁移elasticsearch集群数据
- PAT (Basic Level) Practice (中文)1027 打印沙漏 (20 分)