* Get *lementsByClassName длины javascript не работает в angular

Question

Простой javascript файл работает абсолютно нормально, но когда я пытаюсь вставить этот код в angular (из ресурсов ИЛИ вставляя код в файл индекса. html), получая неожиданное значение.

HTML code
<p class='collect'> this is text </p>
<p class='collect'> this is text </p>
<p class='collect'> this is text </p>

//js in separate file

var all = document.getElementsByClassName('collect');
console.log(all.length);

//returns 3 

//js code in angular

var all = document.getElementsByClassName('collect');
console.log(all);

// returns 
HTMLCollection []
length: 3
0: p.collect
1: p.collect
2: p.collect 

// but in
console.log(all.length);
// returns 0

Answer 1

Длина

равна нулю, потому что до времени Angular компонент, имеющий эти p-теги, не загружался в dom. Поэтому поместите этот код в хук жизненного цикла ngAfterViewChecked.

Answer 2

Вы должны попробовать document.querySelector('.collect').

Answer 3

Я нашел этот ответ , и я думаю, что вам нужно ввести DOCUMENT в orden для работы:

(я предполагаю, что вы используете Angular, а не AngularJS

import { DOCUMENT } from '@angular/common'; 

@Component({...})
export class AppCmp {
   constructor(private document: DOCUMENT) {
      document.getElementsByClassName('collect');
      console.log(all.length);
   }
}

Дайте мне знать, если это работает для вас.