Path of custom directive: C:\Code\SPA\spartacus\projects\storefrontlib\ SRC \ CMS -structure\ Page \ Component \component-wrapper.directive

Selector for the directive: cxComponentWrapper



It is only used in 5 files, which seems not very widely used:

HTML source code:

<button (click) ="toggle($event)">Hide/show</button>
Copy the code

Note that the (click) syntax is different from Angularjs :ng-click after clicking:

The actual implementation of my Angular Component HTML expression toggle($event) is a template Button 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);
Copy the code



For more of Jerry’s original articles, please follow the public account “Wang Zixi “: