Source Code
version 17.3.5
commit cc57d4c4998b4e38f940afdf358af37185028072
EventManagerPlugin
For the official, it does provide an event management solution that allows for different monitoring based on any event name
However, it is only based on the event name to listen to DOM elements and handle their listening
The official does not provide a solution for processing component outputs
According to source code We know that the outputs of all components are actually subscribed directly, which means there is no chance to intercept them
Is the component output actually being monitored twice?
As mentioned above, all components are subscribed directly. However, when a component is subscribed directly, it also performs event listening, which means that EventManagerPlugin can also listen. After all, custom components are also DOM elements
But here’s the problem. Even if you can handle this listening by creating an event manager, it only handles event listening, and subscriptions have nothing to do with it. In normal development, you will never call the DOM element of a component to do a dispatchEvent
Another issue is that the event manager relies on source code,addEventListener interface obtains an element and event name. How to find the corresponding component through the element?
Magic modification moment, showcasing skills begins
We found that there is an attribute called __ngContext__ on the element, and the number on this attribute is actually the LView ID
We use publicly available and non-public methods ɵgetLContext Get its LContext. Then read it to LView
On LView, there are many key attributes, and component instances are one of them Index position
Once we find the corresponding element of the component, we can hook up the original event emission and let it only go through our own listening channel. This part is relatively simple, just look at the source code
Handling event modifiers
There are two types of event modifiers, one is guard that returns true to prohibit, and the other is map, which is used for converting data
The code comes with some ‘guard’ type modifiers. From Vue source code
Regarding keyboard type event modifiers, fully call the official ng ɵKeyEventsPlugin
Use
npm i @cyia/ngx-common
import { EVENT_MODIFIER_OPTIONS, EventModifiersPlugin } from ‘@cyia/ngx-common/event‘;
providers: [
{
provide: EVENT_MANAGER_PLUGINS,
useClass: EventModifiersPlugin,
multi: true,
deps: [DOCUMENT],
},
{
provide: EVENT_MODIFIER_OPTIONS,
useValue: {
modifiers: {
map: {
// custom event modifier
prefix: (value) => {
return `prefix:${value}`;
},
},
},
componentOutput: true,
},
},
],
<button (click.stop.once)=“clicked(‘btnClicked’)”>点击</button>
</div>
<app-a (output2.prefix.once)=“output($event)” (output2)=“output($event)”></app-a>
Contact me
If you have any technical issues, please contact me for assistance wszgrcy@gmail.com
