Angular input控件的click事件表达式如何被转换成JavaScript函数

源代码：

<button (click)="toggle($event)">隐藏/显示</button>

这个表达式toggle($event)，如何被Angular转换成的JavaScript函数呢？

通过调试，找到Angular视图渲染的地方:

renderView和executeTemplate：

下面这个函数就是将表达式转换成Angular JavaScript listener的地方：

/**
 * Adds an event listener to the current node.
 *
 * If an output exists on one of the node's directives, it also subscribes to the output
 * and saves the subscription for later cleanup.
 *
 * \@codeGenApi
 * @param {?} eventName Name of the event
 * @param {?} listenerFn The function to be called when event emits
 * @param {?=} useCapture Whether or not to use capture in event listener
 * @param {?=} eventTargetResolver Function that returns global target information in case this listener
 * should be attached to a global object like window, document or body
 *
 * @return {?}
 */
function ɵɵlistener(eventName, listenerFn, useCapture = false, eventTargetResolver) {
    /** @type {?} */
    const lView = getLView();
    /** @type {?} */
    const tView = getTView();
    /** @type {?} */
    const tNode = getPreviousOrParentTNode();
    listenerInternal(tView, lView, lView[RENDERER], tNode, eventName, listenerFn, useCapture, eventTargetResolver);
    return ɵɵlistener;
}

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