如何从父级获取自定义组件的子级

Question

我正在尝试使用以下代码获取自定义编写组件的子代：

 var a = document.getElementById("quantity");
   var quantity = a.value;

它返回此错误： 无法读取未定义的属性“子”

总结一下，这种方法只适用于原生HTML元素，我如何为自定义组件做到这一点？谢谢 ！

Answer 1

我不会使用nativeElement.children，而是使用自定义组件中的@ViewChildren装饰器使子组件在CustomComponent的属性中可用，我们称之为myChildren }，像这样：

class CustomComponent {
  @ViewChildren(ChildComponent) myChildren: QueryList<ChildComponent>;
}

然后使用@ViewChild装饰器获取实际组件，而不仅仅是ElementRef：

class ParentComponent {
  @ViewChild(CustomComponent) customComp: CustomComponent;
}

然后在您的自定义组件上访问myChildren属性，如下所示：

ngAfterViewInit() {
  const grandchildren = this.customComp.myChildren;
}

这个答案简化了一个假设，即你知道你想要获得的大孩子的类型，而你不只是试图让所有孩子都成为自定义组件的孩子。

几点说明：

• 在AfterViewInit生命周期挂钩之前，请勿尝试访问@ViewChild。在看到@ DeborahK的评论后，我觉得我应该更多地强调这一点，所以我'我把它用粗体。 这可能是您当前代码的唯一问题。
• 键入您的@ViewChild属性作为组件本身（CustomComponent），而不是ElementRef。