Angular 6中如何通过@ViewChild获取指定class的span元素内容？

API 探路者

2026-5-29

解决Angular中通过@ViewChild定位class元素并获取内容的问题

嘿，我来帮你搞定这个问题！你的代码里有几个小细节出错了，导致拿不到目标内容，我一步步给你捋清楚：

首先先指出你当前代码里的问题：

nativeElement是一个属性，不是函数，不能像nativeElement('span')这样调用，它直接返回你通过@ViewChild获取的DOM元素（也就是那个带somename标记的div）。
getElementByClassName拼写错误，正确写法是getElementsByClassName（注意多了个s），而且这个方法返回的是元素集合，需要取集合里的第一个元素才能拿到内容。

正确的实现方式有两种，推荐第一种更简洁的：

方式一：用`querySelector`直接定位目标元素

querySelector可以直接通过选择器精准找到子元素，代码更简洁直观，修改后的完整组件代码如下：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  // 给ViewChild指定ElementRef类型，能获得更好的TypeScript类型提示
  @ViewChild('somename') someName!: ElementRef<HTMLDivElement>;

  getInputValue() {
    // 直接在父div上用选择器找到带somethingelse类的span
    const targetSpan = this.someName.nativeElement.querySelector('.somethingelse');
    if (targetSpan) {
      alert(targetSpan.innerHTML);
    }
  }
}

方式二：修正`getElementsByClassName`的调用方式

如果你想用这个方法，要注意它返回的是HTMLCollection，需要取索引0的元素：

getInputValue() {
  // 先拿到父div元素
  const parentDiv = this.someName.nativeElement;
  // 获取class为somethingelse的元素集合，取第一个元素
  const targetSpan = parentDiv.getElementsByClassName('somethingelse')[0];
  if (targetSpan) {
    alert((targetSpan as HTMLElement).innerHTML);
  }
}