Angular中无需ViewChild，如何在HTML内直接为模板引用元素设置类？

答案 #

可以实现，无需声明ViewChild即可直接在模板层面完成类的设置，常用有两种实现方案：

方案1：通过NgClass指令绑定状态变量 #

你只需要在组件中声明一个布尔类型的状态变量标记校验状态，直接和textarea的类绑定即可：

<!-- 组件模板 -->
<*wrapper-component (submit)="isTx1Required = !tx1.value; tx1.value && submit(tx1.value)">
  <textarea #tx1 [ngClass]="{'required': isTx1Required}"></textarea>
</*wrapper-component>

对应TS文件仅需声明变量 isTx1Required = false，不需要任何DOM操作相关的代码。

方案2：直接调用模板引用的原生DOM API #

原生元素的模板引用本身就指向对应的DOM节点，你可以直接在模板的事件表达式中调用原生API操作类：

<!-- 组件模板 -->
<*wrapper-component (submit)="tx1.value ? submit(tx1.value) : tx1.classList.add('required')">
  <textarea #tx1></textarea>
</*wrapper-component>

该方案无需额外声明变量，代码更简洁。

注意：你原有代码中的setClass不是原生DOM API，仅部分UI组件库会对外暴露该方法。如果使用的是封装后的textarea组件而非原生元素，模板引用默认指向组件实例而非DOM节点，这种场景更推荐使用NgClass绑定的方案实现类控制，兼容性更好。

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