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

Question

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

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

我的策略是使用 @ViewChildren 引用它并在 ngOnInit 方法中设置行为，或者如果需要，在 ngAfterContentInit 方法中设置行为.但是，似乎当我命中断点并在控制台中键入 this.comboxes 时，列表 undefined。我四处搜索，但没有找到任何有用的东西(不过，这可能是我的无知造成的)。

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

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

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

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.

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

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

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