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.ManualOnPushif ((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 falseresult = 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接收到：

要获取更多Jerry的原创文章，请关注公众号"汪子熙":

Angular Component之间的事件通知机制相关推荐

Angular父子Component之间的事件通知机制
例子:product-list为parent Component,product-alert为child Component. (1) child Component里必需的开发从@angular/ ...
spring事件通知机制详解
优势解耦对同一种事件有多种处理方式不干扰主线(main line) 起源要讲spring的事件通知机制,就要先了解一下spring中的这些接口和抽象类: ApplicationEventPub ...
epoll边缘触发_epoll事件通知机制详解，水平触发和边沿触发的区别
看到网上有不少讨论epoll,但大多不够详细准确,以前面试有被问到这个问题.不去更深入的了解,只能停留在知其然而不知其所以然.于是,把epoll手册翻译一遍,更深入理解和掌握epoll事件处理相关知识 ...
使用 Rxjs 解决 Angular Component 之间的通信问题
本文讨论如果两个 Angular Component 彼此不知道对方的存在,并且也没有共享的父子 Component 时,如何进行通信. 在包括 Angular 在内的许多前端框架中,当我们将应用程序 ...
Spring Event事件发布机制
使用Spring Event优雅实现业务需求. 文章目录一. 什么是Spring Event 二. 为什么要用Spring Event 三. 使用Spring Event实现邮件发送一. 什么是S ...
Android应用程序组件Content Provider的共享数据更新通知机制分析
在Android系统中,应用程序组件Content Provider为不同的应用程序实现数据共享提供了基础设施,它主要通过Binder进程间通信机制和匿名共享内存机制来实现的.关于数据共享的另一个话 ...
Poco库使用:事件通知
文章目录通知中心NotificationCenter 通知队列NotificationQueue 优先级通知队列PriorityNotificationQueue 带时间戳的通知队列TimedNot ...
Spring IoC 源码系列（三）Spring 事件发布机制原理分析
在 IoC 容器启动流程中有一个 finishRefresh 方法,具体实现如下: protected void finishRefresh() {clearResourceCaches();init ...
dubbo学习之事件通知实践
目录实践 dubbo-demo-interface dubbo-demo-xml-provider notify-provider.xml UserNotifyServiceImpl Provide ...

Angular Component之间的事件通知机制

Angular Component之间的事件通知机制相关推荐

最新文章

热门文章