javascript getElementsByClassName 长度在角度中不起作用答案

【问题标题】：javascript's getElementsByClassName length not working in angularjavascript getElementsByClassName 长度在角度中不起作用
【发布时间】：2020-02-24 12:06:49
【问题描述】：

一个简单的 javascript 文件运行得非常好，但是当我尝试以角度插入这些代码（从资产或在 index.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

【问题讨论】：

它们在 DOM 中的外观如何？
您可能在页面生命周期中过早地在 Angular 中运行代码。你能发布它被调用的上下文吗？
试试 document.querySelector('.classname')

标签： javascript angular

【解决方案1】：

你应该试试document.querySelector('.collect')。

【讨论】：

必须使用 ClassName 选择器，我需要数组中的元素
@AmitKumawat，这就是你想要的吗？ stackblitz.com/edit/angular-wtumlo
感谢@ManirajMurugan，但是您是从 ts 文件中完成的，您可以从 js 文件中完成吗？就像在资产中添加 js 文件，或者在 index.html 中的脚本标签内。
@AmitKumawat，你的意思是这样的？？ stackblitz.com/edit/angular-wtumlo?file=index.html
感谢@ManirajMurugan，实际上 DOM 是在执行代码之前加载的，我找到了更多避免这种情况的方法，包括你的。

【解决方案2】：

我找到了this answer，我认为您需要在 orden 中注入 DOCUMENT 才能工作：

（我假设您使用的是 Angular 而不是 AngularJS

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

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

让我知道这是否适合你。

【讨论】：

我认为不需要注入文档。OP 可以使用 ElementRef 、 ViewChild 或简单地使用 queryselector 访问元素
是的，当然，但如果您需要/想要使用document，这个答案是。正如您所说，还有其他选择，@ViewChild 就是其中之一。
使用文档不需要注入。你回答说我认为你需要注入 Document.. 这可能会造成混乱

【解决方案3】：

length 变为零，因为直到具有这些 p 标签的 Angular 组件尚未加载到 dom 中。所以把这段代码放在生命周期钩子ngAfterViewChecked中。

【讨论】：

我认为它们已加载，因为在 console.log(all); // 返回 HTMLCollection [] length: 3 0: p.collect 1: p.collect 2: p.collect // 但在 console.log(all.length); // 返回 0