Question

我正在使用第三方模块（一个日期选择器），它将自己解析为DOM中的以下内容（我的书面html只有datepicker元素）

<material-datepicker>
  <div>
    <input>

我希望能够以编程方式执行对该输入的单击。我已经尝试将一个局部变量附加到datepicker元素，但当然该项目不是在监听点击。我挖了下来，最后得到了我真正认为应该工作的下面，但不是......

 const ref = this.datepicker.elementRef;
 const input = ref.nativeElement.querySelector('input');
 console.log('INPUT', input)
 input.click();

上面输入的输出是一个合法的输入元素

<input _ngcontent-c2="" class="datepicker__input ng-untouched ng-pristine ng-valid" readonly="true" ng-reflect-ng-style="[object Object]" ng-reflect-model="2017/06/11" placeholder="Select a date" style="color: rgb(51, 51, 51); background-color: rgb(255, 255, 255); border: 1px solid rgb(218, 218, 218);">

但是点击不会做任何事情。我查看了模块本身，并没有对click事件做任何想象，所以它应该工作。

我无法提供jsfiddle或任何东西，因为它依赖于第三方模块，https://github.com/koleary94/Angular-2-Datepicker

Answer 1

我会使用Name,Surname,Age,Sex,Grade Chris,C.,14,M,4 Adam,A.,17,M,None Jack,O.,None,M,8方法：

<强> template.html

picker.onInputClick()

注意此处需要<material-datepicker #picker [(date)]="yourModelDate"></material-datepicker> <button (click)="picker.onInputClick(); $event.stopPropagation()">Open manually</button>因为datepicker处理文档点击

<强> Plunker Example

Angular2单击动态生成的元素

1 个答案: