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

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

<button (click)="onSave()">Save</button>

事件绑定侦听按钮的单击事件，并在发生单击时调用组件的 onSave()。

Spartacus 的一个例子：

$event 是事件对象。

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

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

看这个例子：

<input [value]="currentItem.name"(input)="currentItem.name=getValue($event)">

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);}}

更多Jerry的原创文章，尽在：“汪子熙”:

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

Subject 在 SAP Spartacus Popover Component 中的应用
Subject 是 Rxjs 里的一个工具对象. Subject 是一种特殊类型的 Observable,它允许将值多播到许多观察者. Subject 就像 EventEmitters. 每个 Sub ...
SAP Spartacus popover Component css 的重用设计
按照需求,我们需要在SAP Spartacus B2B 页面的 List header 和Card header两处,同时显示info icon, 因此,有必要设计一个统一的icon style,然后 ...
SAP Spartacus popover Component 的单元测试
我们在SAP Spartacus B2B Page 的 list和Card页面,点击(i) icon之后,会看到一个popover Component,可以通过下面的选择器访问: cx-popover ...
SAP Spartacus Popover Component 显示与否的逻辑判定
本文同这个 Github issue 相关. Directive 8023 created 6348 Directive created 回车,6348 创建 7054 Component 点击use ...
Rxjs debounce 操作符在 SAP Spartacus 函数节流中的一个实际使用例子
在 window-ref.ts 的实现里,定义了一个每隔 300 毫秒,通过 fromEvent 发射一个 resize event 的Observable: /*** Returns an obse ...
SAP Spartacus Popover Directive 构造函数的用途分析
该构造函数位于文件 popover.directive.ts 里: 第 11 行 cxPopOver Directive 施加到 button 元素上之后,运行时,cxPopOver Directiv ...
SAP Spartacus List Component 里定义的待显示 Popover 内容，如何传递到 Popover Component 里的？
中心思想:这个传递以 Popover Directive 为桥梁. PopoverComponent里的 content 属性: string 或者 TemplateRef,后者是 ng-templa ...
通过 SAP Spartacus 的 Component 映射机制，更改默认购物车 Cart 页面
Spartacus默认的购物车界面: https://github.com/SAP/spartacus-bootcamp/blob/master/sparta0/src/app/components/ ...
SAP Spartacus 用户请求中的 current id 是从哪里来的
从 SAP Spartacus 成功登录之后,能在 Local Storage 里观察到 userId 为 current: 这个 current id 从哪里来的呢?在 Spartacus 应用初始 ...

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

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

最新文章

热门文章