angular 中怎么注入元素

在 Angular 中，可以使用 `@ViewChild` 或 `@ContentChild` 装饰器来注入元素。

`@ViewChild` 用于注入在组件模板中引用的元素，例如：

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

@Component({
  selector: 'app-example',
  template: '<div #exampleDiv>Hello World!</div>'
})
export class ExampleComponent {
  @ViewChild('exampleDiv') exampleDiv: ElementRef;
  
  ngAfterViewInit() {
    console.log(this.exampleDiv.nativeElement.innerHTML); // 输出 "Hello World!"
  }
}

`@ContentChild` 用于注入在组件模板中使用 `<ng-content>` 插槽传递的元素，例如：

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

@Component({
  selector: 'app-example',
  template: '<ng-content></ng-content>'
})
export class ExampleComponent {
  @ContentChild('exampleDiv') exampleDiv: ElementRef;
  
  ngAfterContentInit() {
    console.log(this.exampleDiv.nativeElement.innerHTML); // 输出 "Hello World!"
  }
}

在模板中，可以使用 `#` 符号来定义一个元素的引用。在组件类中，使用 `@ViewChild` 或 `@ContentChild` 装饰器并传入引用名称，就可以注入相应的元素了。注意，在使用注入的元素之前，需要等到 `ngAfterViewInit` 或 `ngAfterContentInit` 生命周期钩子被调用。