对于每个开发人员来说,调试都是一个很好的工具。 角度的 9引入了新的Debugging API,使我们的生活变得轻松。通常,调试是对代码进行故障排除的关键部分。在Angular 9中,它已添加了一个全局“ng ”对象使您更轻松。

好的,在哪里可以使用此调试API?
好问题。首先,我们将看到可以在哪里使用它。然后,我们将通过示例详细讨论这些调试API。
您准备好抢知识蛋糕了吗?
当然是!!那’s为什么你在这里。我对吗?好,然后做一件事。打开您喜欢的浏览器。就我而言,我正在使用Microsoft Edge(’由您决定)。然后输入 ng 。 屏幕上显示什么?

在转到我们的教程之前,我想问一个问题。
什么是$ 0?
$ 0是从元素检查器或在浏览器开发人员工具中使用inspect Element的最近选择的元素引用。在本调试API教程中,我们将多次使用它。

现在,我们将详细说明Ivy提供的这些隐藏的调试API方法。通常,Ivy提供了五种主要的API方法。但是我想在介绍主要方法之前告诉您另外一个失败者方法。
ng 。applyChanges(el):
该方法触发对选定组件的更改检测,就像我们在控制台中使用上述方法对任何角度对象进行了某些更改一样,我们需要调用 “ng.applyChanges” 为了反映DOM中的更改,现在让’彼此逐一进行。
ng 。getComponent(el):
这是一种非常有用的方法,可用于随时检查应用程序的当前状态。它从HTML元素检索角度分量实例。我们可以使用这种方法来测试任何第三方组件,例如ng-bootstrap。
注意:
您必须选择确切的组件元素,否则它将返回null,如下所示:

getComponent 退货组件实例 如果选择确切的元素(<应用根>)

getComponent 退货“null”如果选择其他元素(<div>)
ng 。getOwningComponent(el):
此方法返回给定HTML元素的父组件。就像 getComponent。但是等等,它与 ng 。getComponent。 ÿdon’如果不需要选择DOM中的确切组件,则可以选择任何HTML元素,它将返回该元素的父角度组件实例。

如上例所示,您可以看到我们可以获取的父组件实例 div 元素的帮助 ng 。getOwningComponent 而 ng 。getComponent 退货空值 对于相同的元素。
我们还可以直接从控制台更改组件的状态,但是我们需要调用 ng 。applyChanges 每次进行更改时,请参见以下内容:

ng 。getContext(el):
It 退货the context of an * ng If 要么 * ng For 对于HTML元素,如果您有一组项目或类似一个列表,我们可以实际使用它来了解* ng For在该元素内部的作用。
用 ng Context 您可以检查诸如 $隐式, 指数, 甚至, 奇, 第一, 持续 and 计数.

ng 。getDirectives(el):
它从HTML元素中检索指令数组,这对于查看哪些指令正在影响元素非常有用,例如有时我们的指令通过标准属性会影响元素。
ng 。getListeners(el):
它返回HTML元素的HTML(例如,单击,更改,焦点)和宿主侦听器的数组,当您想要触发侦听器而不实际执行操作时,这非常有用。

在上面的示例中,方法返回该元素的所有侦听器 div,我们甚至可以直接从控制台调用回调函数,但是我们需要调用 ng 。applyChanges 为了在DOM中应用,请参见以下内容:

还有其他两种方法,我不会在本文中深入探讨它们,而只是想让您了解这些方法,例如 ng 。getRootComponents 和 ng 。getInjector 他们就像检索基础根组件’可以通过角度引导,也可以使用特定组件的喷射器。
如果您也想了解这些方法。然后评论我们。我们将详细介绍使用这些方法的另一篇文章。

