ng-xray 是一个非常有用的 npm 包，它可以帮助前端开发人员在 Angular 应用程序中深入了解组件树的结构并解决最常见的问题之一，即调试难度。ng-xray 包可以显示一个叠加在页面上的组件树，并显示每个组件的详细信息。
安装 ng-xray
要安装 ng-xray，您需要在控制台中运行以下指令：
npm install ng-xray --save-dev
然后，您需要将 ng-xray 包安装到 app.module.ts 文件的导入列表中。
import { NgxrayModule } from 'ng-xray';使用 ng-xray
一旦您成功地安装了 ng-xray，您就可以在浏览器中启动该应用程序并打开开发者工具。您将看到新的 ng-xray 选项卡。选择该选项卡以显示组件树。
在此窗格中，您可以单击任何组件以查看该组件的详细信息。
如果您单击父组件，您将在右侧的面板中看到与该组件相关联的组件数。这些组件都是该组件的子组件。
这些组件内联显示，并显示在浏览器窗口的右侧。这使您可以更轻松地调试该组件。
显示指示器
在右上角有几个按钮，您可以使用这些按钮来控制指示器的显示。
您可以使用 "Component Ratio" 按钮来显示指示器的位置。指示器显示为方形，您可以单击该方形并选择拖动它以更改它的位置。
显示树形结构
如果您单击 "Show tree" 按钮，ng-xray 将显示组件树。该树显示为弹出的侧边栏。
显示 JSON 数据
您可以使用 "Show JSON" 按钮来显示组件树的 JSON 数据。
JSON 数据显示在另一个浏览器窗口中。这是因为 ng-xray 在另一个窗口中运行。
示例代码
要使用 ng-xray，您需要将该包作为依赖项添加到 package.json 文件中。您还需要在 app.module.ts 文件中导入 NgxrayModule 并将其添加到模块的 imports 数组中。最后，您需要在 app.component.html 文件中添加下面的代码。
<ngx-xray></ngx-xray>
这将在屏幕上显示一个 ng-xray 指示器。
总结
ng-xray 是一个非常有用的 npm 包，可以帮助 Angular 应用程序开发人员深入了解组件树的结构并加快调试进程。在这篇文章中，我们介绍了如何安装和使用 ng-xray，并提供了示例代码。希望这篇文章能够帮助您学习和理解 ng-xray 的工作原理及其用途。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055eac81e8991b448dc25c