如何从ElementRef获取文本？插件返回未渲染DOM节点的解决方法

嘿，我懂你遇到的问题了！在Angular（2+）里处理这种情况其实比AngularJS更直接——既然你已经拿到了ElementRef且nativeElement已经正确填充，那直接用原生DOM的属性就能拿到文本，不用像AngularJS那样调用angular.elem(node).text()。

核心方法：用原生DOM的文本属性 #

ElementRef.nativeElement本身就是标准的原生DOM元素对象，针对未渲染/隐藏的元素，推荐用这两个属性：

• textContent：最适合你的场景，它会返回元素及其所有子元素的全部文本内容，不管元素是否可见、有没有挂载到DOM树，完全不受CSS样式影响。
• innerText：这个属性只会返回元素中可见的文本内容，如果元素是display: none或者未渲染，它大概率会返回空字符串，所以不推荐用在你的情况里。

代码示例 #

假设你通过@ViewChild或者其他方式拿到了目标ElementRef，可以这样写：

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

@Component({
  selector: 'app-hidden-text-demo',
  template: `
    <!-- 这个元素是隐藏状态，未渲染到可见区域 -->
    <div #hiddenTarget style="display: none">
      这是隐藏元素里的文本
      <span>还有子元素的文本内容</span>
    </div>
  `
})
export class HiddenTextDemoComponent implements AfterViewInit {
  // 通过@ViewChild获取元素的ElementRef
  @ViewChild('hiddenTarget') hiddenElementRef!: ElementRef;

  ngAfterViewInit() {
    // 确保元素初始化完成后再操作
    const nativeEl = this.hiddenElementRef.nativeElement;
    
    // 获取全部文本
    const fullText = nativeEl.textContent;
    console.log('全部文本:', fullText); 
    // 输出："这是隐藏元素里的文本还有子元素的文本内容"

    // 隐藏元素用innerText会返回空
    const visibleText = nativeEl.innerText;
    console.log('可见文本:', visibleText); 
    // 输出：""
  }
}

关键注意点 #

1. 选对时机：一定要在元素创建完成后再获取文本，比如用ngAfterViewInit钩子（别用ngOnInit）——ngOnInit时视图还没完全初始化，元素可能还不存在。
2. 确认元素存在：如果你的元素是通过*ngIf控制显示的，要确保*ngIf为true时再访问nativeElement，不然会拿到undefined。

内容的提问来源于stack exchange，提问作者MattEnth