无法使用@ViewChildren选择在Angular 2的模板中声明的组件

Question

I'm migrating a jQuery application to Angular 2 and one of the passages that didn't work is the following selector for setting a behavior of the menus.

$("li.dropdown").on("mouseenter mouseleave", function () { ... }); 

My strategy was to refer to it using @ViewChildren and set the behavior in ngOnInit method or, if necessary, in the ngAfterContentInit method. However, it seems that when I hit the breakpoint and type this.comboxes in the console, the list undefined . I've googled around but didn't really hit anything useful (might be my ignorance to be blamed, though).

How can I go about to set a mousy behavior to some of the elements in the template? I'm fully open to another approach if this one is flawed.

import { Component, ViewChildren } from "@angular/core";

@Component({
  selector: "navbar",
  template: require("./navbar.html")
})
export class NavBar {
  @ViewChildren("li.dropdown") comboxes;

  constructor() { console.log("NavBar created"); }

  ngOnInit() { console.log("OnInit"); debugger; }

  ngAfterContentInit() { console.log("OnCompInit"); debugger; }
}

Answer 1

Selector used by @ViewChildren is not the same as JQuery uses:

Specifies a CSS selector that identifies this directive within a template. Supported selectors include element, [attribute], .class, and :not().

Does not support parent-child relationship selectors.

Also @ViewChildren by default will find only components and directives with matching selectors. You need to pass template reference to @ViewChildren to query for DOM:

<div #templateRef>test</div>
<component #templateRef></component>

@ViewChildren('templateRef', {read: ElementRef}) nodes:QueryList<ElementRef>;