Angular2点击动态生成的元素
问题描述:
我使用的是第三方模块(日期选择器),它解决了自身作为下面的DOM(我写HTML只具有日期选择器元素)Angular2点击动态生成的元素
<material-datepicker>
<div>
<input>
我想能够以编程方式执行对该输入的点击。我已经尝试将一个本地var附加到datepicker元素,但当然,该项目不在监听点击。我挖,结束了与低于此我真的认为应该工作,但不...
const ref = this.datepicker.elementRef;
const input = ref.nativeElement.querySelector('input');
console.log('INPUT', input)
input.click();
输入输出上面是legitmate寻找输入元素
<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
答
我会用picker.onInputClick()
方法:
template.html
<material-datepicker #picker [(date)]="yourModelDate"></material-datepicker>
<button (click)="picker.onInputClick(); $event.stopPropagation()">Open manually</button>
注这里需要$event.stopPropagation()
,因为datepicker处理文档点击
+0
非常感谢yurzui,这是我失踪的topPropagation! –
你期待什么发生?如果您将单击事件绑定到输入,我们可以看到那段代码吗?或者你只是想着重于输入? –
当'input.click()'执行时,你期望发生什么?你有一个正在监听点击事件的处理程序吗? –
为什么不是[** Material2#datepicker **](https://material.angular.io/components/component/datepicker)? :) – developer033