angular中获取dom

在 Angular 中获取 DOM 元素有几种常见的方式：

1. 使用 ViewChild：
在组类中，使用 `@ViewChild` 装饰器来获取 DOM 元素的引用。首先，在组件类中导入 `ViewChild` 和 `ElementRef`，然后在类中定义一个成员变量，并使用 `@ViewChild` 装饰器来获取 DOM 元素的引用。例如：

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

   @Component({
     selector: 'app-my-component',
     template: '<div #myElement>Hello World</div>'
   })
   export class MyComponent {
     @ViewChild('myElement') myElement: ElementRef;

     ngAfterViewInit() {
       console.log(this.myElement.nativeElement);
     }
   }

2. 使用 Renderer2：
在组件中注入 `Renderer2`，并使用它提供的方法来访问 DOM 元素。首先，在组件类中导入 `Renderer2`，然后在构造函数中注入 `Renderer2`，最后使用 `renderer` 对象来访问和操作 DOM 元素。例如：

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

   @Component({
     selector: 'app-my-component',
     template: '<div #myElement>Hello World</div>'
   })
   export class MyComponent {
     constructor(private renderer: Renderer2) { }

     ngAfterViewInit() {
       const element = this.renderer.selectRootElement('#myElement');
       console.log(element);
     }
   }

3. 使用 ElementRef：
在组件中注入 `ElementRef`，并使用它来访问 DOM 元素。首先，在组件类中导入 `ElementRef`，然后在构造函数中注入 `ElementRef`，最后使用 `nativeElement` 属性来访问原生 DOM 元素。例如：

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

   @Component({
     selector: 'app-my-component',
     template: '<div #myElement>Hello World</div>'
   })
   export class MyComponent {
     constructor(private elementRef: ElementRef) { }

     ngAfterViewInit() {
       console.log(this.elementRef.nativeElement);
     }
   }

需要注意的是，直接操作 DOM 元素可能会违反 Angular 的封装和抽象原则，推荐优先使用 Angular 提供的数据绑定和事件绑定机制来操作和交互组件。只有在必要的情况下才使用上述方式来获取和操作 DOM 元素。