Angular中@ContentChildren组件nativeElement undefined，如何获取高度？

问题原因 #

你当前代码里，@ContentChildren(CardHeaderComponent) 获取到的是CardHeaderComponent的实例对象，但你将其声明为QueryList<ElementRef>，类型不匹配，所以访问nativeElement会返回undefined。

解决方法 #

方法一：在子组件中暴露ElementRef

1. 修改CardHeaderComponent，注入ElementRef并设为公共属性：

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

@Component({
  selector: 'card-header',
  template: '<ng-content></ng-content>'
})
export class CardHeaderComponent {
  constructor(public elementRef: ElementRef) {}
}

2. 在父组件中修正类型定义，通过子组件的elementRef获取原生元素：

import { Component, ContentChildren, QueryList, AfterViewInit } from '@angular/core';
import { CardHeaderComponent } from './card-header.component';

@Component({
  selector: 'app-card',
  template: `
    <ng-content select="card-header"></ng-content>
    <ng-content select="card-body"></ng-content>
    <ng-content></ng-content>
    <ng-content select="card-footer"></ng-content>
  `
})
export class CardComponent implements AfterViewInit {
  @ContentChildren(CardHeaderComponent) headers: QueryList<CardHeaderComponent>;

  ngAfterViewInit() {
    if (this.headers.first) {
      const nativeElement = this.headers.first.elementRef.nativeElement;
      console.log('Header高度:', nativeElement.offsetHeight);
    }
  }
}

方法二：使用read选项直接获取ElementRef

在父组件的@ContentChildren装饰器中添加read: ElementRef配置，直接获取组件对应的原生元素引用：

import { Component, ContentChildren, QueryList, ElementRef, AfterViewInit } from '@angular/core';
import { CardHeaderComponent } from './card-header.component';

@Component({
  selector: 'app-card',
  template: `
    <ng-content select="card-header"></ng-content>
    <ng-content select="card-body"></ng-content>
    <ng-content></ng-content>
    <ng-content select="card-footer"></ng-content>
  `
})
export class CardComponent implements AfterViewInit {
  @ContentChildren(CardHeaderComponent, { read: ElementRef }) headers: QueryList<ElementRef>;

  ngAfterViewInit() {
    if (this.headers.first) {
      console.log('Header高度:', this.headers.first.nativeElement.offsetHeight);
    }
  }
}

说明 #

两种方法都能正确获取原生DOM元素，可根据需求选择offsetHeight、clientHeight或scrollHeight获取对应高度值。

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