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

来源

2017-06-17 Joshua Ohana

你期待什么发生？如果您将单击事件绑定到输入，我们可以看到那段代码吗？或者你只是想着重于输入？ –

当'input.click（）'执行时，你期望发生什么？你有一个正在监听点击事件的处理程序吗？ –

为什么不是[** Material2＃datepicker **]（https://material.angular.io/components/component/datepicker）？ :) – developer033

我会用picker.onInputClick()方法：

template.html

<material-datepicker #picker [(date)]="yourModelDate"></material-datepicker> 
<button (click)="picker.onInputClick(); $event.stopPropagation()">Open manually</button>

注这里需要$event.stopPropagation()，因为datepicker处理文档点击

Plunker Example

来源

2017-06-17 04:07:51 yurzui

非常感谢yurzui，这是我失踪的topPropagation！ –

Angular2点击动态生成的元素

回答

相关问题