Angular中如何通过TypeScript动态为CSS类添加样式属性

针对reCAPTCHA V3动态注入徽章无法用Angular模板指令控制样式的问题，有两种可行实现，你可以根据需求选择：

方案1：通过TypeScript动态添加样式（匹配你的需求） #

核心逻辑是等reCAPTCHA资源加载完成、徽章节点注入DOM后，通过Angular推荐的Renderer2操作样式，搭配DOM变动监听兜底，避免偶发拿不到节点的问题。
直接在根组件AppComponent中添加如下逻辑即可：

import { Component, Renderer2, AfterViewInit } from '@angular/core';
declare const grecaptcha: any;

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

  ngAfterViewInit(): void {
    // reCAPTCHA加载完成后尝试获取徽章节点
    grecaptcha.ready(() => {
      const badge = document.querySelector('.grecaptcha-badge');
      if (badge) {
        this.renderer.setStyle(badge, 'visibility', 'hidden');
      }
    });

    // 兜底监听：应对节点注入晚于ready事件的场景
    const domObserver = new MutationObserver(() => {
      const badge = document.querySelector('.grecaptcha-badge');
      if (badge) {
        this.renderer.setStyle(badge, 'visibility', 'hidden');
        domObserver.disconnect(); // 拿到节点后停止监听，减少性能消耗
      }
    });
    domObserver.observe(document.body, { childList: true, subtree: true });
  }
}

注意事项：

• 不要在ngOnInit生命周期执行上述逻辑，此时Angular未完成视图初始化，大概率拿不到动态注入的节点
• 优先使用Renderer2操作样式而非直接修改原生DOM的style属性，可兼容Angular Universal服务端渲染场景，避免非浏览器环境下的API报错

方案2：全局CSS直接设置（无TS逻辑，性能最优） #

如果没有必须通过TS动态控制样式的强需求，完全不需要写TS代码，直接在现有的global.scss中补全样式属性即可，全局样式对第三方动态注入的DOM节点默认生效：

.grecaptcha-badge {
  visibility: hidden;
}

该方案没有JS运行时开销，是实现该需求最简单的方式。

注意：根据reCAPTCHA V3使用规则，隐藏徽章时需要在站点对应表单位置添加明确提示，告知用户站点受reCAPTCHA保护，避免违反使用条款。

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