Angular input控件的click事件响应处理的调用上下文

简介: Angular input控件的click事件响应处理的调用上下文

自定义指令的路径:

C:\Code\SPA\spartacus\projects\storefrontlib\src\cms-structure\page\component\component-wrapper.directive.ts


指令的选择器:cxComponentWrapper


image.pngimage.pngimage.pnghtml源代码:

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

注意这个(click)的语法和Angularjs不一样:ng-click

点击之后:image.pngimage.png

/**
 * 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);

image.pngimage.png

相关文章
|
22天前
|
JavaScript
Angular使用@Input和@Output实现父子组件互相传参(类似Vue的props和this.emit)
Angular使用@Input和@Output实现父子组件互相传参(类似Vue的props和this.emit)
|
4月前
|
JavaScript
Angular Input 注解在 Spartacus 项目开发中的实际应用场景一例
Angular Input 注解在 Spartacus 项目开发中的实际应用场景一例
30 0
|
JavaScript API
Angular input decorator学习笔记
https://angular.io/api/core/Input Input decorator只能用在Angular class字段里, 用于指定元数据,将class字段指定成input property.
Angular input decorator学习笔记
|
JavaScript
Angular form控件的shadow DOM
Angular form控件的shadow DOM
79 0
Angular form控件的shadow DOM
Angular form控件原生HTML代码里ng-reflect-form属性和其值的生成时机
Angular form控件原生HTML代码里ng-reflect-form属性和其值的生成时机
122 0
Angular form控件原生HTML代码里ng-reflect-form属性和其值的生成时机
使用Angular可重用Component思路实现一个自带图标(icon)的input控件
使用Angular可重用Component思路实现一个自带图标(icon)的input控件
104 0
使用Angular可重用Component思路实现一个自带图标(icon)的input控件
|
JavaScript 容器
Angular应用input和div标签页的动态创建场景
Angular应用input和div标签页的动态创建场景
183 0
Angular应用input和div标签页的动态创建场景
|
23天前
|
存储 前端开发 API
浅谈 Angular 应用前端消息显示机制的一个实际需求
浅谈 Angular 应用前端消息显示机制的一个实际需求
11 0
|
3月前
|
设计模式 JavaScript 前端开发
什么是 Angular 应用里的 Custom provider
什么是 Angular 应用里的 Custom provider
32 2
|
4月前
Angular 应用里异步打开对话框的技术实现
Angular 应用里异步打开对话框的技术实现
22 0

热门文章

最新文章