Angular 事件绑定语法在 SAP Spartacus Popover Component 中的一个应用

简介: Angular 事件绑定语法在 SAP Spartacus Popover Component 中的一个应用

要绑定到事件,请使用 Angular 的事件绑定语法。此语法由等号左侧括号内的目标事件名和右侧引号内的模板语句组成。在下面的示例中,目标事件名是 click ,模板语句是 onSave() 。

image.pngimage.png

$event 是事件对象。


$event 对象通常包含该方法所需的信息,例如用户名或图片 URL。


目标事件决定了 $event 对象的形态。如果目标事件是来自原生 DOM 元素的,那么 $event 是一个DOM 事件对象,它具有 target 和 target.value 等属性。


看这个例子:


      (input)="currentItem.name=getValue($event)">

1

2

input 控件的 value,绑定到 Component 的 currentItem.name 属性。

input 控件的 input 事件,每当触发时,会把 getValue 返回的结果,赋给 Component 属性 currentItem.name


这个绑定会在一个上下文中执行该语句,此上下文中包含 DOM 事件对象 $event。


Angular 会通过调用 getValue($event.target) 来获取更改后的文本,并用它更新 name 属性。


在模板中,$event.target 的类型只是 EventTarget。在 getValue() 方法中,把此目标转为 HTMLInputElement 类型,以允许对其 value 属性进行类型安全的访问。


Spartacus 的这个例子,展示了如何通过 TypeScript 代码,判断 button 上触发的用户交互事件,到底是按钮被鼠标点击造成的,还是被键盘敲击造成的。


close(event: MouseEvent | KeyboardEvent) {

   event.preventDefault();

   if (event instanceof MouseEvent) {

     this.eventSubject.next(PopoverEvent.CLOSE_BUTTON_CLICK);

   } else {

     this.eventSubject.next(PopoverEvent.CLOSE_BUTTON_KEYDOWN);

   }

 }



目录
相关文章
|
6月前
|
Web App开发 数据采集 前端开发
纯技术讨论:如何让 SAP UI5 应用无法被别人在浏览器里调试 - 这种做法不推荐试读版
纯技术讨论:如何让 SAP UI5 应用无法被别人在浏览器里调试 - 这种做法不推荐试读版
|
6月前
|
XML 存储 数据格式
SAP UI5 控件 customData 属性的应用介绍
SAP UI5 控件 customData 属性的应用介绍
|
3月前
|
Linux C++ Windows
【Azure 应用服务】Azure App Service(Windows)环境中如何让.NET应用调用SAP NetWeaver RFC函数
【Azure 应用服务】Azure App Service(Windows)环境中如何让.NET应用调用SAP NetWeaver RFC函数
【Azure 应用服务】Azure App Service(Windows)环境中如何让.NET应用调用SAP NetWeaver RFC函数
|
3月前
数字化核心构建问题之SAP为应用软件扎根客户打基础如何解决
数字化核心构建问题之SAP为应用软件扎根客户打基础如何解决
23 0
让 SAP UI5 应用的日志打印变得五彩缤纷试读版
让 SAP UI5 应用的日志打印变得五彩缤纷试读版
|
6月前
|
JavaScript 前端开发
试读版:如何找出 SAP 标准 Fiori 应用某个按钮点击后执行的 JavaScript 源代码
试读版:如何找出 SAP 标准 Fiori 应用某个按钮点击后执行的 JavaScript 源代码
关于 SAP ABAP OData 服务如何实现 Deep Insert 场景 - SAP 应用的标准行为试读版
关于 SAP ABAP OData 服务如何实现 Deep Insert 场景 - SAP 应用的标准行为试读版
|
缓存 负载均衡 前端开发
SAP Spartacus 和 Sticky session 相关的话题
SAP Spartacus 和 Sticky session 相关的话题
SAP Emarsys 和 SAP Spartacus 的集成
SAP Emarsys 和 SAP Spartacus 的集成
|
API 开发者
Google Tag Manager (GTM) 和 Adobe AEPL 在 SAP Spartacus 中的应用
Google Tag Manager (GTM) 和 Adobe AEPL 在 SAP Spartacus 中的应用

热门文章

最新文章