Question

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

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

我的策略是使用@ViewChildren引用它，并在ngOnInit方法中设置行为，或者在ngAfterContentInit方法中设置行为。但是，似乎当我点击断点并在控制台中键入this.comboxes时，列表undefined。我已经google了一下，但没有真正打出任何有用的东西（可能是我的无知被指责）。

我怎样才能为模板中的某些元素设置一个糟糕的行为？如果这个方法存在缺陷，我会完全接受另一种方法。

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使用的不同：

指定在模板中标识此指令的CSS选择器。支持的选择器包括element，[attribute]，。class和：not（）。

不支持父子关系选择器。

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

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

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

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

1 个答案: