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()方法中，我在输入框中添加了一个充当模型的本地字段的监视程序，每当更改时，我在本地列表中添加了一些条目，这些条目随后充当ng-repeat指令在另一个div中.

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)方法内部，我可以完全访问在影子dom模板内部创建的DOM.

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屋！