Question

我正在使用名为：mydatepicker

的第三方非原生Angular 2日历组件

在表单上实现时显示为：

这是我将其添加到HTML中的方式：

<my-date-picker #datePickerBox 
    [options]="myDatePickerOptions">
</my-date-picker>

我需要以编程方式调用日历窗口，在正常情况下打开时没有任何问题（如果我使用鼠标并单击图标或在关注my-date-picker元素时按Enter键）。

顺便说一句。这是单击图标时的样子：

我的问题是，我的应用程序的用户还需要按F9键打开日历窗口，我不知道如何去做。

这是我到目前为止的代码。

@ViewChild('datePickerBox') datePickerBox:ElementRef;
constructor(private renderer:Renderer) {}

f9KeyOnPartialDateComponent(event): void {
 if(event.keyCode === 120) {
  let mouseclick = new MouseEvent('click', {bubbles: true});
  setTimeout(() => {      
  this.renderer.invokeElementMethod(this.datePickerBox.nativeElement,
  'dispatchEvent', [mouseclick]); }, 500);
 }
}

如果“#datePickerBox”放在本地元素（如输入字段）上，但当我将其放在<my-date-picker>上时不起作用，则此方法有效。我明白了：

点击，焦点和其他事件是否仅适用于原生元素？有没有办法使用Angular 2打开这个组件的日历窗口？

更新 mydatepicker的新版本1.6.4允许以编程方式打开组件：https://github.com/kekeh/mydatepicker/wiki/Open-selector-with-selector-attribute

Answer 1

在自定义元素上使用@ViewChild时，它将返回Component实例。此实例没有nativeElement属性。

选项＃1

您应该更改@ViewChild调用它返回ElementRef而不是组件，虽然我不完全肯定这会起作用：

@ViewChild('datePickerBox', {read: ElementRef}) 
datePickerBox:ElementRef;

选项＃2

如果选项1不起作用，您应该更新MyDatePickerComponent以在构造函数中使用它：

constructor(public elementRef: ElementRef){}

然后您可以像这样使用渲染器：

this.renderer.invokeElementMethod(this.datePickerBox.elementRef.nativeElement, 'dispatchEvent', [mouseclick]);

将您的@ViewChild更改为：

@ViewChild('datePickerBox') 
datePickerBox: MyDatePickerComponent;

选项＃3

如果你的自定义组件有toggleDatePicker方法（或任何接近它的方法），你最好只调用该方法而不是搞乱事件。更清洁，更好。正如我告诉你的那样，@ViewChild将返回组件实例，所以你要做的就是：

@ViewChild('datePickerBox') 
datePickerBox: MyDatePickerComponent;


f9KeyOnPartialDateComponent(event): void {
  if(event.keyCode === 120) {
     this.datePickerBox.toggleDatePicker();
  }
}

模拟鼠标单击或在非本机元素上输入按键

1 个答案: