在angular4中触发键盘事件（回车键）答案

【问题标题】：Trigger the keyboard event (enter key) in angular4在angular4中触发键盘事件（回车键）
【发布时间】：2017-11-15 04:43:59
【问题描述】：

在我的应用程序中，我有一个全局搜索字段，用于过滤列表中的数据，列表将有多个列。从其他组件设置过滤器值（设置为输入值）它正在发生，但我必须触发输入上的手动键盘事件（输入键）操作。

我尝试使用 viewChild 装饰器。

component.html

<input #gb type="text" placeholder="Global search.." class="changeListComponent_inputSearch"  [(ngModel)]="jiraRef" />

组件.ts

@ViewChild('gb') gb:ElementRef;         
this.jiraRef =  jiraRef;
const event = new KeyboardEvent("keypress",{ "which ": "13"});
this.gb.nativeElement.focus();
this.gb.nativeElement.dispatchEvent(event);

使用它我可以设置值并获得焦点，但键盘事件没有触发。

【问题讨论】：

通过将事件更改为 const event = new KeyboardEvent("keypress", { key: '13' } ); 它对我有用。假设您在视图已经实例化时执行您的操作。您能否为您的代码提供更多细节或更好的stacklitz？ :)

标签： javascript angular

【解决方案1】：

使用原生 js 代码触发按键事件。
将 id 属性与元素引用一起放置到输入元素中。

从我的组件内部创建了新函数。

triggerEvent(el, type) {
    if ('createEvent' in document) {
        var e = document.createEvent('HTMLEvents');
        e.initEvent(type, false, true);
        el.dispatchEvent(e);
    } else {
        var e = document.createEventObject();
        e.eventType = type;
        el.fireEvent('on'+e.eventType, e);
    }
}

var el=document.getElementById('gb-search');
this.triggerEvent(el,'keyup');

【讨论】：

【解决方案2】：

我不确定你为什么要让它变得复杂。为什么不直接向输入字段添加按键事件，然后也可以通过 viewChild 触发该事件？

<input id="text1" type=text (keyup)="enterPressed()">

然后也可以通过子视图访问同样的方法：

this.viewChild.enterPressed();

【讨论】：

【解决方案3】：

一般来说，您的输入可以是：

<input (keydown.enter)="doEnter()">

从其他组件只需调用函数doEnter。怎么样？

如果搜索组件在父组件中，这很容易，因为您可以使用 ViewChild

 <search-component></search-component>
 @ViewChild(SearchComponent) searchComponent
 ..whe we need..
 this.searchComponent.doEnter()

否则，通常使用主题来订阅。您有一项服务，

@Injectable({
  providedIn: 'root',
})
export class KeyBoardService {
  keyboard:Subject<any>=new Subject<any>()
  constructor() { }

}

在你的组件搜索中，在构造函数和 ngOnInit 中注入服务

constructor(private keyboardService:KeyBoardService){}
ngOnInit(){
    this.keyboardService.keyboard.subscribe(_=>{
         this.doEnter()
    })
}

在其他组件中

constructor(private keyboardService:KeyBoardService){}
..in anywhere..
this.keyboardService.next(null);

存在另一个选项，即当两个组件同时出现在屏幕中时 - 并且在同一个 <router-outlet></router-outlet> 中，即使用模板引用变量和输入。所以我们有

<search-component #search></search-component>
<other-component [search]=search><other-component>

在其他组件中

@Input('search') searchComponent
..in anywhere
this.searchComponent.doEnter

【讨论】：

【解决方案4】：

你可以简单地使用

<input type=text (keypress)="eventHandler($event)">

eventHandler(event) {
   console.log(event, event.keyCode, event.keyIdentifier);
}

解决方案基于此答案 Get which key pressed from (keypress) angular2

【讨论】：

我必须以编程方式触发键盘事件
是的，你必须绑定keypress事件，这样每次你按下一个键，都会触发该事件。
不适用于手动事件按键，从javascript代码我必须触发文本框上的回车键。