Angular Component之间的事件通知机制
生活随笔
收集整理的這篇文章主要介紹了
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之间的事件通知机制的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 时间轮详解(现在北京时间)
- 下一篇: xr卡贴怎么放