如何使用 ViewChildren 使用模板变量获取多个本机元素？

Posted 2023-03-13

【中文标题】如何使用 ViewChildren 使用模板变量获取多个本机元素？

【英文标题】：How can I use ViewChildren to get multiple native elements using template variables?

【发布时间】：2019-05-01 19:02:29

【问题描述】：

我正在尝试使用 ViewChildren 从我的模板中获取一组堆叠的画布元素，以便以后可以像绘图程序中的图层一样在它们上进行绘制。

drawing.component.html

<canvas #canvaslayer style="z-index: 0;"></canvas>
<canvas #canvaslayer style="z-index: 1;"></canvas>
<canvas #canvaslayer style="z-index: 2;"></canvas>

drawing.component.ts

@Component(
  selector: 'app-drawing',
  templateUrl: './drawing.component.html',
)

export class DrawingComponent implements OnInit 


  @ViewChildren('canvaslayer') canvasLayers: QueryList<ElementRef>;

  ngOnInit() 
     //this.canvasLayers == undefined here and
     //this.canvasLayers[0].nativeElement throws an exception
  

当我这样做时，ViewChildren 返回未定义。我认为 ViewChildren 通常与角度组件一起使用而不是原生 HTML 元素，但我宁愿不创建一个新组件来封装画布。

【问题讨论】：

有多少个？

ngAfterViewInit 怎么样？

【参考方案1】：

它返回undefined，因为你问得太早了。 ViewChildren 在ngOnInit 被调用之后和ngAfterViewInit 之前填充。

  ngAfterViewInit () 
     // this.canvasLayers works here
  

查看docs on lifecycle hooks。

【讨论】：

成功了，谢谢。附带说明一下，ViewChild 的结果在 ngOnInit() 内部起作用，知道为什么它们在不同时间解决吗？