Question

我已经为我的模板中的某些组件添加了一个标签。

<div>...</div>
<div #blopp>...</div>
<div>...</div>
<div #blopp>...</div>
<div #blopp>...</div>
<div>...</div>

我也在课程定义中这样做。

export class NavBar {
  @ViewChildren("blopp", { read: ElementRef }) blopps: QueryList<ElementRef>;
  constructor() { console.log("NavBar created"); }
  ngAfterViewInit() { debugger; }
}

我可以使用以下脚本遍历调试器中的元素。但是，我不能只使用on(event,action)，因为我得到的错误是这种方法不存在。

blopps.forEach((element)=>{...});

谷歌搜索给了我关于blopp.listener(...)的一些信息，但似乎我的查询列表也没有这个方法。目前，我觉得不是很好，所以它可能是相当明显的。我缺少什么，如何将事件添加到模板的控件中？

Answer 1

字段blopp的类型为QueryList，这意味着它应按照以下示例进行处理：

constructor(private renderer:Renderer){}

//AfterViewInit interface
ngAfterViewInit() {
   blopps.forEach(elementRef => {
    this.renderer.listen(elementRef.nativeElement, 'click', (e) => console.log(e));
   });
}

Answer 2

您需要订阅更改并指定类型。如果你的元素是原生的，你可以这样做：

this.blopps.changes.subscribe(children => {
      //note that children is a collection so you can do foreach here
        children.last.nativeElement.focus();

      // console.log(children.first['_results'][0].nativeElement);                                         
      console.log(children.first);                                          

      // Do Stuff or wire  with referenced element here...   
    });

Answer 3

您需要调用toArray()来获取可以迭代的数组：

blopps.toArray().forEach((element)=>{...});

如何将模板中的控件订阅到事件监听器？

3 个答案: