如何通过Angular API而非原生DOM方法获取元素引用？

首先呼应你提到的Angular文档警告：

Angular文档明确指出：仅在必须直接访问DOM时才将此API作为最后手段，应优先使用Angular提供的模板和数据绑定，也可使用Renderer2，其提供的API即使在不支持直接访问原生元素的环境中也能安全使用。依赖直接DOM访问会导致应用与渲染层紧耦合，无法分离二者并将应用部署到Web Worker中。

确实，Angular并没有提供像RendererX.querySelector这样直接通过CSS选择器从组件上下文查询元素的官方API，但我们有几种符合最佳实践的替代方案，既能满足你动态修改样式的需求，又能避免直接操作原生DOM。

方案1：自定义指令 + ViewChildren/ContentChildren（推荐） #

这是最符合Angular组件化思想的方案，通过给目标元素添加自定义指令，我们可以轻松捕获动态创建的元素，还能结合自定义属性进行筛选。

步骤1：创建自定义指令 #

先定义一个指令，用来标记需要操作的元素，同时可以接收你的自定义属性：

import { Directive, ElementRef, Input, Renderer2 } from '@angular/core';

@Directive({
  selector: '[targetElement]' // 用来标记目标元素的选择器
})
export class TargetElementDirective {
  @Input() myProp: string; // 接收你的自定义属性值

  constructor(public elementRef: ElementRef, private renderer: Renderer2) {}

  // 封装设置样式的方法，方便外部调用
  setStyle(style: string, value: any, flags?: any) {
    this.renderer.setStyle(this.elementRef.nativeElement, style, value, flags);
  }
}

步骤2：在动态模板中使用指令 #

假设你通过*ngFor动态创建元素，直接给元素加上指令和自定义属性：

<!-- 动态生成的元素示例 -->
<div *ngFor="let item of dynamicItems" targetElement [myProp]="item.propValue">
  {{ item.content }}
</div>

步骤3：在父组件中捕获并操作元素 #

通过@ViewChildren监听所有带指令的元素（包括动态新增的）：

import { Component, ViewChildren, QueryList, AfterViewInit } from '@angular/core';
import { TargetElementDirective } from './target-element.directive';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html'
})
export class ParentComponent implements AfterViewInit {
  dynamicItems = [
    { propValue: 'val_1', content: '元素1' },
    { propValue: 'val_2', content: '元素2' }
  ];

  @ViewChildren(TargetElementDirective) targetElements!: QueryList<TargetElementDirective>;

  ngAfterViewInit(): void {
    // 初始处理元素样式
    this.updateElementStyles();

    // 监听动态元素的新增/删除变化
    this.targetElements.changes.subscribe(() => {
      this.updateElementStyles();
    });
  }

  private updateElementStyles() {
    // 根据自定义属性筛选元素并设置样式
    this.targetElements.forEach(directive => {
      if (directive.myProp.startsWith('val_')) {
        // 这里可以根据自定义属性值动态计算样式
        const bgColor = directive.myProp === 'val_1' ? 'red' : 'blue';
        directive.setStyle('background-color', bgColor);
      }
    });
  }

  // 模拟动态添加元素
  addNewItem() {
    const newVal = `val_${this.dynamicItems.length + 1}`;
    this.dynamicItems.push({ propValue: newVal, content: `元素${this.dynamicItems.length + 1}` });
  }
}

这个方案完全遵循Angular的规则，不需要直接调用nativeElement或document，还能完美处理动态元素的变化。

方案2：NgStyle + 数据绑定（更简洁的声明式方案） #

如果你的样式可以通过数据直接驱动，那优先用Angular的声明式绑定，完全不需要手动获取元素。

给每个动态元素对应的数据对象添加样式配置：

dynamicItems = [
  { propValue: 'val_1', content: '元素1', styles: { 'background-color': 'red' } },
  { propValue: 'val_2', content: '元素2', styles: { 'background-color': 'blue' } }
];

// 运行时动态修改样式
updateItemStyle(propValue: string, newStyle: any) {
  const item = this.dynamicItems.find(i => i.propValue === propValue);
  if (item) {
    // 合并原有样式和新样式
    item.styles = { ...item.styles, ...newStyle };
  }
}

然后在模板中直接绑定ngStyle：

<div *ngFor="let item of dynamicItems" [ngStyle]="item.styles">
  {{ item.content }}
</div>

这种方式最符合Angular"数据驱动UI"的理念，代码更简洁，也完全避免了DOM操作。

方案3：组件内范围的DOM查询（最后手段） #

如果以上方案都不适用，必须用CSS选择器查询，那可以在组件内通过ElementRef.nativeElement进行范围查询——这比直接用document.querySelector更安全（只查询当前组件的DOM树），但确实会依赖原生DOM，无法部署到Web Worker。

示例代码：

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

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html'
})
export class ParentComponent implements AfterViewInit {
  constructor(private elementRef: ElementRef, private renderer: Renderer2) {}

  ngAfterViewInit(): void {
    // 仅查询当前组件内的目标元素
    const targetElements = this.elementRef.nativeElement.querySelectorAll('myClass[myProp^="val_"]');
    
    targetElements.forEach((el: HTMLElement) => {
      // 根据自定义属性值动态设置样式
      const propValue = el.getAttribute('myProp');
      const bgColor = propValue === 'val_1' ? 'red' : 'lightblue';
      this.renderer.setStyle(el, 'background-color', bgColor);
    });
  }
}

注意：这个方案是最后的选择，尽量优先用前两种方案，避免耦合原生DOM。

总结一下，优先选择自定义指令+ViewChildren或NgStyle数据绑定，这两种方案完全符合Angular的最佳实践，既能满足动态元素的样式修改需求，又能避免直接操作原生DOM。

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