AngularDart NgComponent 在控制器中使用事件监听器 [英] AngularDart NgComponent using event listeners in the controller

问题描述

我在 Angular Dart 中有一个 NgComponent，它实例化一个搜索框，并根据查询字符串使用 ng-repeat 指令填充我的 html 模板中的另一个 div.

I have an NgComponent in Angular Dart which instantiates a search box and according to the query strings it populates another div in my html template with the ng-repeat directive.

更准确地说，

查询字符串更新:我的组件控制器中的字段绑定到输入文本值.

Query string update: there is a binding to the input text value with a field in my components' controller.

结果填充:在 attach() 方法中，我为本地字段添加了一个观察者，作为输入框的模型，每当它发生变化时，我都会向本地列表添加一些项目然后作为另一个 div 中 ng-repeat 指令的模型.

Results population: In the attach() method I added a watcher for the local field which acts as a model to the input box, and whenever it changes I add to a local list some items which then acts as a model to the ng-repeat directive in another div.

到目前为止一切正常.但是现在我想在我的组件中添加一些事件侦听器，例如击键侦听器，或者如果可能的话在我的 html 模板中的特定元素上添加侦听器.我已经将 CSS 用于悬停和焦点事件，还使用 ​​ng-focus 和 ng-blur 来实现简单的功能.但我不认为这可以用于击键监听器.

So far everything works fine. But now I want to add some event listeners inside my component, like keystroke listeners or if possible to add listeners on specific elements in my html template. I have used CSS for hover and focus events and also ng-focus and ng-blur for easy functions. But I do not think that this can be used for keystroke listeners.

我想要按键监听器的原因是使用箭头键启用结果遍历.当光标在输入文本框内时，我想移动到第一个结果，它在另一个 div 中，按下向下箭头，然后继续其他结果.

The reason I want the keystroke listener is to enable results traversing using the arrow keys. While the cursor is inside the input text box I would like to move to the first result, which is in another div, with the press of Down arrow, and then continue to the other results.

谢谢

推荐答案

好的，看来我终于找到了解决方案.

OK, It seems that I have finally found the solution.

解决方案是使用我的组件实现 NgShadowRootAware 接口，然后在 void onShadowRoot(ShadowRoot shadowRoot) 方法中我可以完全访问在阴影内创建的 DOMdom 模板.

The solution is to implement the NgShadowRootAware interface with my component and then inside the void onShadowRoot(ShadowRoot shadowRoot) method I have full access to the DOM created inside the shadow dom template.

这篇关于AngularDart NgComponent 在控制器中使用事件监听器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！