javascript - Angular 6 - 指令输出同时触发所有组件
问题描述
我有一个包含四个 datePicker 组件的表单,用户只能从日历中选择日期,但他们不能编辑它。我创建了一个指令,允许在用户单击canc & backspace 按钮时取消日期。
现在的问题是,该指令的输出同时触发了所有四个 datePicker 组件,并且所有这些组件的日期都被取消了。
这是指令的代码:
@Directive({
selector: '[atenaAllowDeleteOnly]',
})
export class AllowDeleteOnlyDirective {
@Output() updatedVal = new EventEmitter(); // emitted Current Value
constructor(private model: NgModel) { }
@HostListener('window:keydown', ['$event'])
keyEvent(event: KeyboardEvent) {
event.preventDefault();
if ((event.keyCode == 8 || event.keyCode == 46)) {
this.updatedVal.emit(null);
}
}
}
日期选择器组件:
<div class="input-group body-input">
<button class="close" type="button"></button>
<input [readonly]="false"
id ="date-{{id}}"
atenaAllowDeleteOnly
(updatedVal)="deleteDate($event)"
(ngModelChange)="onSelectDate($event)"
attr.aria-describedby="{{label}}"
class="form-control"
[class.datePicker-border]="!_isReadOnly"
placeholder="gg/mm/aaaa" [name]="name"
[(ngModel)]="valueApp" ngbDatepicker #d="ngbDatepicker">
<img src="../../../../../Atena/assets/img/icons/calendar.svg"
(click)="_isReadOnly ? null : d.toggle()" alt>
</div>
deleteDate 方法同时触发所有 DatePicker 组件
解决方案
您的主机侦听器是 on window:keydown
,这意味着您正在侦听每个指令中整个窗口上的所有 keydown 事件。
只需将其更改为:
@HostListener('keydown', ['$event'])
让它只是元素keydown
推荐阅读
- python - 如何使用python从csv文件格式中读取数据
- python - 将列值分配给熊猫数据框中的唯一行
- react-native - 如何使用 Expo 在 React Native 中共享 QRCode?
- virtual-reality - 为什么 VRCapture 无法记录 openvr 的样本
- php - 比较 2 个数组以匹配邮政编码并获取相邻的数组值
- angular - 角度相同的元素在不同的屏幕尺寸上具有不同的绑定
- python - Django 错误:get() 返回了多个 userData -- 它返回了 2
- python - 未找到“cvlib”发行版,pyinstaller 中的应用程序需要该发行版
- amazon-cloudfront - 如何配置使用 http inside 作为 AWS Cloudfront 中的内部协议
- joomla - “找不到类'JToolbarHelper'”错误,无法控制joomla