Angular 5：如何通过类名定位SCSS文件所属组件

我之前在维护Angular 5项目时刚好遇到过一模一样的问题，给你分享几个实用的方法，能快速定位到这些带[_ngcontent-cXX]样式所属的组件：

• 利用Angular组件标识关联到组件
  你看到的[_ngcontent-c25]里的c25是Angular为每个组件分配的唯一标识，对应的组件根元素（宿主元素）会带有[_nghost-c25]属性。操作步骤如下：

  1. 在浏览器开发者工具的Elements面板里，找到带有[_nghost-c25]的元素（通常是自定义组件标签，比如<app-user-profile>）
  2. 选中这个元素后，切换到Console面板，输入ng.probe($0)并回车
  3. 在返回的对象中找到componentType属性，展开后就能看到组件的类名（比如UserProfileComponent），直接在项目里搜索这个类名就能找到对应的组件文件和关联的SCSS

• 启用样式源映射直接查看文件路径
  Angular 5默认可能没开启样式源映射，开启后能直接在开发者工具里看到样式对应的SCSS文件：

  1. 打开项目根目录下的.angular-cli.json配置文件
  2. 找到defaults节点，添加或修改stylesSourceMap为true，示例配置如下：

     "defaults": {
       "stylesSourceMap": true,
       // 其他已有配置...
     }
     

  3. 重启ng serve，之后在开发者工具的Styles面板里，每个样式规则右侧会显示对应的SCSS文件路径和行号，点击就能直接跳转到源文件

• 通过组件选择器反向定位
  找到带有[_ngcontent-c25]的元素后，往上找它的父级，应该能找到带有[_nghost-c25]的组件宿主标签（比如<app-dashboard>），这个标签就是组件的选择器。直接在项目里搜索这个选择器字符串，就能快速定位到对应的组件文件，进而找到关联的SCSS样式

这些方法在Angular 5默认的Emulated样式封装模式下都能生效，亲测好用！

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