Angular2 +使用.getElementsByClassName（）返回空选择但存在

Question

我可能有一个相当简单的问题，但我找不到答案。 我也搜索过以前的问题，但似乎没有工作....

我在我的模板上有一个div的大量文本角度，一些部分用一个span包裹，那些有类突出显示 。 现在我只想在按下按钮时全部选择它们。 我需要所有的跨度并稍后与他们一起做。

我试过了：

const elm = (this.el as any).getElementsByClassName('.highlight');
console.log('elmens: ', elm);
for (let i = 0; i < elm.length; i++) {
  console.log('HTML ELM: ', elm[i]);
}

还有：

const elm = document.getElementsByClassName('.highlight');

这两个都只返回一个空的选择，虽然它们存在。 我甚至在浏览器控制台上尝试过它。 我知道我可以使用jQuery，但我不想将它包含在这么简单的任务中。

也许你知道我做错了什么???

我在用：

• Angular：7.0.0
• Angular-cli：7.0.2
• 打字稿：3.1.3

Answer 1

我希望避免在角度框架中使用这种技术，因为不建议以这种方式与DOM交互。 他们有适当的选择。 与DOM交互可能会引入性能影响并且是不好的做法。

相反，你可以考虑使用@viewchildren来解决这个问题。 文档在这里

这将表明你想获得每个元素，你的情况spans

<span #myNewId>text</span> 
<span #myNewId>text snippet 2</span> 

可以通过以下方式在控制器中访问

@ViewChildren('myNewId')public mySpans: ElementRef;

这应该为您提供所有相同的功能，而无需直接与DOM交互。 然后mySpans将是一个标有#myNewID的跨度数组。

这也应该允许您访问与您的问题有关的元素，因为它们绑定了类中的变量。

Answer 2

我会用：

const elements= (<HTMLCollection>document.getElementsByClassName('your_class_name_without_dot'));

console.log(elements)

Answer 3

也许您的子视图未初始化，并且在元素呈现给浏览器之前尝试使用DOM。 尝试使用Angular钩子，然后调用代码。 喜欢

ngAfterViewChecked() {

   ...
   const elm = (this.el as any).getElementsByClassName('.highlight');
   console.log('elmens: ', elm);
   for (let i = 0; i < elm.length; i++) {
     console.log('HTML ELM: ', elm[i]);
   }
   ...

}