在我的应用程序中,我有一个全局搜索字段,用于过滤列表中的数据,列表将有多个列。从其他组件设置过滤器值(设置为输入值),它正在发生,但我必须触发输入上的手动键盘事件(回车键)操作。
我尝试了viewChild装饰器。
component.html
<input #gb type="text" placeholder="Global search.." class="changeListComponent_inputSearch" [(ngModel)]="jiraRef" />
component.ts
@ViewChild('gb') gb:ElementRef;
this.jiraRef = jiraRef;
const event = new KeyboardEvent("keypress",{ "which ": "13"});
this.gb.nativeElement.focus();
this.gb.nativeElement.dispatchEvent(event);
使用这个,我可以设置值,并使一个焦点,但键盘事件不触发。
4条答案
按热度按时间fcy6dtqo1#
使用原生js代码触发了按键事件。
将id属性与元素引用沿着放置到input元素中。
从组件内部创建新函数。
kqlmhetl2#
我不知道你为什么把事情搞复杂了。为什么不直接在输入字段中添加一个按键事件,然后通过viewChild触发该事件呢?
然后还可以通过view child访问相同的方法:
pcrecxhr3#
一般来说,您的输入可以是:
从其他组件简单地调用函数
doEnter
。怎么做?如果搜索组件在父组件中,那么就很容易了,因为可以使用ViewChild
否则,通常使用Subject来订阅。你有一个服务
在组件Search中,在构造函数和ngOnInit中注入服务
而在另一个组件中
存在另一个选项,即当两个组件在屏幕上的时间-并在相同的
<router-outlet></router-outlet>
是使用模板引用变量和输入。所以我们有在其它部件中
esyap4oy4#
您可以简单地使用
解决方案基于此答案Get which key pressed from (keypress) angular2