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

我正在将一个jQuery应用程序迁移到Angular 2，其中一个不起作用的部分是以下用于设置菜单行为的选择器

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

我的策略是使用@ViewChildren引用它，并在ngOnInit方法中设置行为，或者在必要时在ngAfterContentInit方法中设置行为。但是，当我点击断点并在控制台中键入this.comboxes时，列表似乎未定义。我在谷歌上搜索过，但没有找到任何有用的东西。不过，这可能是我的无知造成的

如何为模板中的某些元素设置鼠标行为？如果这个方法有缺陷，我完全愿意接受另一种方法

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; }
}

@ViewChildren使用的选择器与JQuery使用的不同：

指定在模板中标识此指令的CSS选择器。支持的选择器包括元素、[attribute]、.class和：not

不支持父子关系选择器

此外，默认情况下@ViewChildren将仅查找具有匹配选择器的组件和指令。您需要将模板引用传递给@ViewChildren以查询DOM:

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

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

---

我不确定我是否理解如何继续。我的模板需要目录中的文件。你是说我需要为我将在自定义脚本中引用的每个组件设置一个ID吗？是的，它被称为模板引用，请参阅。不过，还不太清楚。我现在已经在我的模板中，我按照你的建议输入了精确的值。然而，当我在ngAfterContentInit中设置断点时，仍然没有定义断点。还有什么可能是错的+1用于伟大的链接。您应该使用AfterViewInit而不是AfterContentInit。nodes变量中有一些问题需要解决。然而，我有一种感觉，我做的都是错的，这通常表现在每件事都是困难和复杂的。例如，现在，我无法访问节点中的简单HTML组件来在菜单上挂起一些事件。我看到了一些关于转换器的东西，我开始觉得我对DOM树的看法是错误的。。。你怎么认为？