Angular 16中无法直接访问组件nativeElement的问题求助

不用额外包裹HTML元素就能实现需求，核心是要获取组件的宿主DOM元素——因为Angular组件类实例本身不是DOM元素，自然没有getBoundingClientRect()这类DOM API。下面提供两种可行方案：

方案1：在子组件中封装DOM操作方法 #

在IntroComponent中注入ElementRef，暴露获取元素位置的方法，父组件直接调用该方法即可：

// intro.component.ts
import { Component, ElementRef } from '@angular/core';

@Component({
  selector: 'intro',
  templateUrl: './intro.component.html'
})
export class IntroComponent {
  constructor(private elementRef: ElementRef) {}

  // 封装获取元素位置的方法
  getElementRect() {
    return this.elementRef.nativeElement.getBoundingClientRect();
  }
}

父组件中通过@ViewChild获取组件实例并调用方法：

// 父组件.ts
import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { IntroComponent } from './intro.component';

@Component({
  template: '<intro #intro></intro>'
})
export class ParentComponent implements AfterViewInit {
  @ViewChild('intro') introComponent!: IntroComponent;

  ngAfterViewInit() {
    const rect = this.introComponent.getElementRect();
    console.log(rect.bottom); // 拿到组件底部位置
  }
}

方案2：父组件直接读取组件的宿主DOM元素 #

如果不想修改子组件，可在父组件的@ViewChild中使用read选项，直接获取<intro>对应的宿主DOM元素：

// 父组件.ts
import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';

@Component({
  template: '<intro #intro></intro>'
})
export class ParentComponent implements AfterViewInit {
  // 通过read选项指定读取宿主元素的ElementRef
  @ViewChild('intro', { read: ElementRef }) introElement!: ElementRef<HTMLElement>;

  ngAfterViewInit() {
    const rect = this.introElement.nativeElement.getBoundingClientRect();
    console.log(rect.bottom); // 拿到组件底部位置
  }
}

这种方式直接绕过组件实例，完全不需要额外包裹<section>标签。

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