Как я могу использовать ViewChildren для получения нескольких собственных элементов с использованием переменных шаблона?

Я пытаюсь использовать 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>

чертеж.компонент.тс

@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 возвращает значение undefined. Я думаю, что ViewChildren обычно используется с компонентами angular вместо собственных элементов HTML, но я бы не стал создавать новый компонент только для инкапсуляции холста.


typescript angular angular7
person Brian    schedule 29.11.2018    source источник
comment
Сколько их?   -  person SiddAjmera    schedule 29.11.2018
comment
А как насчет ngAfterViewInit?   -  person yurzui    schedule 29.11.2018

Ответы (1)


arrow_upward
2
arrow_downward

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

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

Ознакомьтесь с документами по хукам жизненного цикла.

person Lazar Ljubenović    schedule 29.11.2018
comment
Это сработало, спасибо. В качестве примечания: результаты ViewChild работали внутри ngOnInit(), есть идеи, почему они разрешаются в разное время? - person Brian; 29.11.2018