Angular技术问询：如何从组件实例获取nativeElement或ElementRef

当然有更顺手的方式来同时搞定组件实例和它对应的nativeElement啦，我给你分享两种常用方案：

方案一：让子组件主动暴露ElementRef #

如果能修改MyComponent的代码，最简单的方式就是在子组件里注入ElementRef并把它设为公共属性，这样父组件拿到实例后就能直接访问：

在MyComponent中：

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

@Component({
  selector: 'my-component',
  template: `<!-- 组件内容 -->`
})
export class MyComponent {
  // 把ElementRef设为公共属性，方便父组件访问
  constructor(public elementRef: ElementRef) {}
}

然后在父组件中：

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { MyComponent } from './my-component.component';

@Component({
  template: `<my-component></my-component>`
})
export class ParentComponent implements AfterViewInit {
  @ViewChild(MyComponent) myComponent: MyComponent;

  ngAfterViewInit(): void {
    // 直接通过组件实例获取nativeElement
    const nativeElement = this.myComponent.elementRef.nativeElement;
    console.log(nativeElement);
  }
}

方案二：通过两个@ViewChild分别获取实例和ElementRef #

如果不想修改子组件的代码，你可以在父组件里声明两个@ViewChild，分别拿到组件实例和对应的ElementRef：

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
import { MyComponent } from './my-component.component';

@Component({
  template: `<my-component></my-component>`
})
export class ParentComponent implements AfterViewInit {
  // 获取组件实例
  @ViewChild(MyComponent) myComponentInstance: MyComponent;
  // 获取该组件对应的ElementRef
  @ViewChild(MyComponent, { read: ElementRef }) myComponentElement: ElementRef;

  ngAfterViewInit(): void {
    // 使用组件实例做业务逻辑
    this.myComponentInstance.doSomething();
    // 同时访问nativeElement
    const nativeElement = this.myComponentElement.nativeElement;
    console.log(nativeElement);
  }
}

注意事项 #

• 一定要在ngAfterViewInit生命周期钩子之后访问@ViewChild获取到的内容，因为Angular在这个阶段才完成视图初始化，确保你拿到的不是undefined。
• 不要直接操作nativeElement除非必要，Angular推荐用模板绑定和指令来操作DOM，避免直接操作带来的兼容性和维护问题。

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