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

Question

我正在尝试使用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元素一起使用，但是我宁愿不要创建一个仅用于封装画布的新组件。

Answer 1

它返回$query->andFilterWhere(['like', 'user', $this->user]) ->andFilterWhere( [ '=', new \yii\db\Expression('DATE_FORMAT(enddate, "%d.%m.%Y")'), date('d.m.Y', strtotime($this->enddate)), ] ); ，因为您要求太早。在调用undefined之后和ViewChildren之前填充ngOnInit。

ngAfterViewInit

签出docs on lifecycle hooks。