Chrome DevTools HTML视图中如何移除Angular的_nghost、_ngcontent属性

_nghost-*、_ngcontent-*是Angular默认ViewEncapsulation.Emulated（模拟Shadow DOM）视图封装模式下自动生成的标记属性，作用是实现组件样式隔离。修改tsconfig.json不生效是因为配置位置错误，Angular不支持在tsconfig层面修改全局视图封装规则，可行方案如下：

方案1：全局关闭模拟视图封装（彻底移除这类属性，推荐） #

根据你项目的架构选择对应配置方式：

Standalone（独立组件）项目（Angular 14+ 推荐架构） #

直接在入口文件main.ts的启动配置里设置全局默认封装模式，不用逐个组件修改：

// 顶部引入依赖
import { bootstrapApplication, DEFAULT_VIEW_ENCAPSULATION, ViewEncapsulation } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, {
  providers: [
    // 全局配置默认关闭视图封装
    {
      provide: DEFAULT_VIEW_ENCAPSULATION,
      useValue: ViewEncapsulation.None
    }
  ]
})

配置完成后重启ng serve开发服务，所有自定义组件就不会再生成_nghost、_ngcontent属性。

NgModule 架构项目 #

Angular没有给NgModule架构提供全局修改默认封装模式的官方入口，有两种处理方式：

• 给所有自定义组件的@Component装饰器单独添加封装配置：

  import { Component, ViewEncapsulation } from '@angular/core';
  
  @Component({
    selector: 'app-demo',
    templateUrl: './demo.component.html',
    styleUrls: ['./demo.component.css'],
    // 新增这行关闭当前组件的模拟封装
    encapsulation: ViewEncapsulation.None
  })
  export class DemoComponent {}
  

• 如果项目组件量大不想逐个修改，可以通过自定义Angular构建器在编译阶段全局替换组件默认封装配置，成本较高，非必要不推荐。

方案2：使用原生Shadow DOM（保留样式隔离，无ng前缀属性） #

如果你不想放弃组件样式隔离，只是不想看到ng开头的自定义属性，可以把封装模式改为ViewEncapsulation.ShadowDom，Angular会直接调用浏览器原生Shadow DOM能力实现样式隔离，不会生成这类标记属性。配置方式和方案1一致，把对应ViewEncapsulation.None替换为ViewEncapsulation.ShadowDom即可。

常见配置无效的踩坑点 #

• 错把配置写在tsconfig.json：Angular的编译器配置不支持全局设置视图封装模式，在tsconfig里加相关字段本身就是无效操作
• 改完配置没重启开发服务：涉及Angular编译规则的配置修改，热更新不会生效，必须完全重启ng serve
• 第三方组件不受本地配置影响：Angular Material、NG-ZORRO这类第三方组件库是预编译发布的，封装模式在库编译阶段就已经确定，本地配置不会修改第三方组件生成的属性，非必要不用强行处理。

注意：使用ViewEncapsulation.None后组件样式会全局生效，必须手动给样式加命名空间做隔离，否则会出现不同组件样式互相覆盖的问题。

内容的提问来源于stack exchange，提问作者s.stkvc