Как я могу использовать 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-элементов, но я бы не стал создавать новый компонент просто для инкапсуляции canvas.

Answer 1

Возвращается undefined, потому что вы спрашиваете слишком рано.ViewChildren заполняется после вызова ngOnInit и до ngAfterViewInit.

  ngAfterViewInit () {
     // this.canvasLayers works here
  }

Извлечение документов на хуки жизненного цикла .