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

控制台调试与`window.ng`

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

window.ng

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

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

  • Angular 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“人格形态”{静止的真正的}personFormNGForm.;//为简洁起见省略}

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

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

el=$“swr-person-search-form”;C=nggetComponentel;CpersonForm控制问:setValue'卢克·天行者';

让我们打破这个:

  • 首先,我可以访问htmlelement.在DOM中通过Chrome的$(选择)实用程序函数并将结果设置为变量el
  • 然后,我们将DOM元素指定为全局可用的第一个(且仅)参数window.ng.getComponent()函数。这会返回组件实例。
  • 使用组件实例,我们现在可以访问personForm属性在对象中!
  • 使用FormsModule由角度提供我们调用设定值()对策formcontrol.instance值为“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=nggetComponentel;CpersonForm控制问:setValue'卢克·天行者';ngmarkDirtyC;

ng.getDirective ()

window.ng.getDirectives()函数返回一个应用于DOM中某个元素的Angular指令数组。

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

我在我的Angular项目中声明了一个指令叫做ContentDirective

@指示{选择器“[swrContent]”}出口班级ContentDirective实施后intentinit.{/ **指令本机元素。* /私人的elhtmlelement.;构造函数私人的只读elementRefElementref.@注入platform_id.私人的只读平实践目的私人的只读渲染器Render2.{}ngaftercontentinit.{如果!!isPlatformBrowser平实践{返回;}el=elementRef母语作为htmlelement.;//为简洁起见省略}}

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

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

nggetDirectives$0.;

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

列表的结果如下所示getDirectives()功能:

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

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

ng.getlisteners()

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

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

ng.gethostelement()

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

让我们来看一个例子:

C=nggetComponent$'SWR-PEELL-LIST';el=nggetHostElementC;检查el;

在这个例子中:

  • 使用Angular组件的选择器来查询DOMswr-people-list
  • 然后,使用ng.gethostelement()功能我们获得了htmlelement.实例。
  • 最后,我们可以使用Chrome的检查()控件中的元素的实用函数元素控制板。

ng.getViewComponent()

如文件所示:

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

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

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

el=$'#userbtn';C=ngGetViewComponent.el;宿主=nggetHostElementC;

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

结论

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

Brian F爱

嗨,我是布莱恩。我对TypeScript, Angular和Node.js感兴趣。我和我最好的朋友邦妮结婚了,我住在波特兰,我经常滑雪。