Как на Angular 14 получить DOM элемент?

Question

[carbanak01]

Здравствуйте!
Сёрфил в интернете в поисках ответа. Нашёл вариант с ViewChild.
Мой код в component html выглядит след образом:

<video id="qr-video" #video disablepictureinpicture="" playsinline=""></video>

Код в component.ts :

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'app-scan',
  templateUrl: './scan.component.html',
  styleUrls: ['./scan.component.scss']
})

export class ScanComponent implements OnInit {

  @ViewChild('video') video: ElementRef; // Выводит ошибку "Свойство "video" не имеет инициализатора, и ему не гарантировано присваивание в конструкторе."

  constructor() {
    this.video = {} as ElementRef; // Написал чтобы решить проблему описанную выше
  }

  ngOnInit(): void {
      console.log(this.video); // Выводит пустой объект
  }

}

Написал в конструкторе this.video = {} as ElementRef; но в консоли выводится пустой объект.

Answer 1

[Антон Швец]

на этапе ngOnInit элемент еще не существует и ViewChild не присвоен.
Можно обратиться к нему позже, после ViewInit или можно добавить настроечку @ViewChild('video', { static: true})тогда он будет доступен в ините

Comments

[carbanak01]

Ого, работает )
И ещё вопрос, если я получаю элемент через document.querySelector у меня выводит ошибку, что Аргумент типа "Element | null", как исправить ?
И вообще хорошей практикой считается получать каким способ элементы ? Через document.querySelector или вышеописанным ?

[Антон Швец]

carbanak01, это вам тайпскрипт ошибку пишет, нужно убедить его что элемент не null.
А способ, лучше ангулярским, через вью чайлд/вью чилдрен