Brian F爱
从专注于角图,Web技术以yobet英雄联盟及波特兰的Node.js的Google开发人员专家中学习。
广告 ·ultimatecourses.com.
用终极课程学习角度正确的方式

控制台调试与`window.ng`

Angular 9在控制台中提供了改进的调试window.ng.

window.ng.

新的window.ng.Global使开发人员能够使用Angular Version 9和新常春藤编译和渲染管道查询和访问指令,组件和查看容器。

要清楚,使用此功能的先决条件是:

  • 角v9(或更大)
  • 常春藤支持项目
  • 开发模式

演示

ng.getcomponent()和ng.markasdirty()演示

ng.getcomponent()

要开始,使用ng服务要使用Angular CLI附带的WebPack Dev Server启动应用程序,然后打开浏览器的开发人员工具。在此示例中,我将访问此角度组件:

@零件{选择器'SWR-Person-Search-form'模板`  搜索 <输入matinput [(ngmodel)] =“q”name =“q”/>  `}出口personsearchformcomponent.实施ondestroyoninit.{@viewchild.“人格形态”{静态的真正}人格形态NGForm.;//为简洁起见省略}

在上面的代码中,我正在使用@ViewChild()查询模板参考变量人格形态,这是一个实例NGForm.。注意,我在此示例中使用模板驱动表格(尽管我常常更喜欢反应形式)。

我们可以查询在DOM中的元素,然后使用window.ng.getComponent()在我们的浏览器的控制台中获取Angular组件实例的方法(作为Dev Tools的一部分):

el=$'SWR-Person-Search-form';C=NG.GetComponent.el;C人格形态控制问:设定值'卢克·天行者';

让我们打破这个:

  • 首先,我可以访问htmlelement.通过Chrome的DOM$(选择器)实用程序函数并将结果设置为变量el
  • 然后,我们将DOM元素指定为全局可用的第一个(且仅)参数window.ng.getComponent()功能。这返回组件实例。
  • 使用组件实例,我们现在可以访问人格形态物业在对象!
  • 使用FormsModule.由角度提供我们调用设定值()对策formcontrol.实例是值“Luke Skywalker”。
  • 最后,通过调用来触发改变检测window.ng.markDirty()函数,指定要标记为脏的组件实例。

ng.getcomponent()公开一个强大的方法来调试控制台。

这只是一个控制台调试可能有所帮助的一些场景:

  • 访问注入的服务并手动调用该服务以检查结果。
  • 订阅可观察到的数据流,并将值记录到控制台。
  • 手动调用组件中的方法以确定结果或返回值。

有了这一说,虽然我认为这对角度开发人员来说将非常有帮助,但这不会取代浏览器的DevTools或通过像VS代码这样的编辑器中的断点样式调试。

ng.markdirty()

我想向你介绍的最后一个函数是window.ng.markDirty()功能。使用控制台调试时,此功能很重要,因为它触发了指定组件的更改检测。

在我们之前的示例中,我们调用了设定值()对策formcontrol.在里面personsearchformcomponent.。如果您使用此代码或类似的东西进行播放,您将注意到该值确实为此设置formcontrol.,但没有什么发生的。在我的例子中,我期待根据所提供的价值来过滤的人员列表。

使用window.ng.markasdirty()功能我们可以指定要触发更改检测的组件实例:

el=$'SWR-Person-Search-form';C=NG.GetComponent.el;C人格形态控制问:设定值'卢克·天行者';NG.马克迪尔C;

ng.getDirective()

window.ng.getDirectives()函数返回应用于DOM中的元素的角度指令数组。

使用此功能,我们不仅可以确定应用于元素的指令,但我们还可以访问特定的指令实例。让我们来看看一个例子。

我在我的角度项目中宣称了一个指令谱图

@指示{选择器'[SwrContent]'}出口谱图实施后intentinit.{/ **指令本机元素。* /私人的elhtmlelement.;构造函数私人的只读Elementref.Elementref.@注入platform_id.私人的只读平实践目的私人的只读渲染器Render2.{}ngaftercontentinit.{如果!!isplatformbrowser.这个平实践{返回;}这个el=这个Elementref.母语htmlelement.;//为简洁起见省略}}

该指令负责在应用程序中适当地显示内容。

在这个下一个例子中,我专门使用谷歌Chrome,这有用yobet英雄联盟控制台中提供的实用程序包括特殊变量$ 0.,这是当前所选元素元素面板。我可以在控制台中引用此DOM元素,甚至提供元素ng.getdirectives()期待DOM元素的功能:

NG.getDirectives$0.;

这将返回应用于当前所选DOM元素的所有指令$ 0.。在我的例子中,这是谱图我之前提到过。

这是一个屏幕截图,显示结果getDirectives()功能:

使用getDirectives()函数调试控制台

我现在可以编程方式操作控制台中浏览器中运行的指令实例。

ng.getlisteners()

window.ng.getListeners()函数返回一系列debugeventlistener.对象。使用debugeventlistener.您可以检查的对象名称触发每个倾听者的事件。

我没有找到这种特殊功能的很多用途,因此如果您知道用例,请在下面的评论中告诉我。

ng.gethostelement()

window.ng.gethostelement()函数接受指令(记住组件是具有模板的指令),并返回本机主机元素。

让我们来看看一个例子:

C=NG.GetComponent.$'SWR-PEELL-LIST';el=NG.gethostelement.C;检查el;

在这个例子中,我们:

  • 查询使用IT选择器查询Angular Component的DOMSWR-人民列表
  • 然后,使用ng.gethostelement()功能我们获得了htmlelement.实例。
  • 最后,我们可以使用Chrome的检查()实用程序函数检查元素元素面板。

ng.getViewComponent()

由于文档指示:

ng.getViewComponent()函数返回与拥有DOM元素的视图关联的组件实例。

在这个下一个例子中,我正在使用一个懒惰的路线,它呈现indexComponent.。该组件呈现为兄弟姐妹表示渲染路由的视图的元素。您可能还注意到此插座以特殊的方式以角度表示自定义元素。

使用ng.getViewComponent()我们可以获取元素的父视图:

el=$'#userbtn';C=NG.GetViewComponent.el;主办=NG.gethostelement.C;

在这里,我们正在使用ng.getViewComponent()获取与之关联的视图的组件实例的函数#userbtn.元件。我们可以根据需要利用组件实例,或者我们也可以使用ng.gethostelement()获取DOM中的本机主机元素的函数用于视图组件。

结论

具有新的常春藤编译和渲染管线的角度9提供了几种有用的全球可用功能,我们可以利用我们在浏览器中执行的角度应用程序进行调试。yobet外围

Brian F爱

嗨,我是布莱恩。我对类型名称,Angular和node.js感兴趣我嫁给了我最好的朋友邦妮,我住在波特兰和我滑雪(很多)。