布莱恩F爱
向来自波特兰的谷歌开发者专yobet英雄联盟家学习Angular、Web技术和Node.js。
广告 ·ultimatecourses.com.
用终极课程学习角度正确的方式

使用window.ng进行控制台调试

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

window.ng.

新的window.ng.global支持开发者使用Angular 9版和新的Ivy编译和渲染管道在浏览器的devtools控制台中查询和访问指令、组件和查看容器。

明确一点,使用该功能的先决条件是:

  • 角v9(或更大)
  • 艾薇启用项目
  • 开发模式

演示

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

ng.getComponent()

首先,使用ng服务使用Angular CLI中包含的webpack dev服务器来启动你的应用,然后打开浏览器的开发工具。在这个例子中,我将访问这个Angular组件:

组件选择器'SWR-Person-Search-form'模板  搜索   出口personsearchformcomponent.实现了OnDestroyoninit.viewchild.“personForm”静态真的人格形态NgForm//省略

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

然后我们可以查询< swr-person-search-form >元素,然后使用window.ng.getComponent ()方法在浏览器的控制台中获取Angular组件实例(作为你的开发工具的一部分):

埃尔'SWR-Person-Search-form'cNG.GetComponent.埃尔c人格形态控制设定值卢克·天行者的

让我们来分析一下:

  • 首先,我可以访问HTMLElement通过Chrome的DOM$(选择器)实用函数并将结果设置为变量埃尔
  • 然后,我们将DOM元素指定为全局可用的第一个(也是唯一的)参数window.ng.getComponent ()函数。这返回组件实例。
  • 通过组件实例,我们现在可以访问人格形态物业在对象!
  • 使用FormsModule.在Angular中调用setValue ()方法FormControl实例是值“Luke Skywalker”。
  • 最后,通过调用来触发改变检测window.ng.markDirty()函数,指定要标记为dirty的组件实例。

ng.getComponent()在控制台中公开用于调试的强大方法。

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

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

话虽如此,虽然我认为这对angular开发人员非常有帮助,但这并不能取代浏览器的devtools或VS Code等编辑器中的断点式调试。

ng.markdirty()

我想介绍的最后一个函数是window.ng.markDirty()函数。这个函数在调试使用控制台时非常重要,因为它会触发指定组件的更改检测。

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

使用window.ng.markAsDirty ()函数中,我们可以指定一个想要触发变更检测的组件实例:

埃尔'SWR-Person-Search-form'cNG.GetComponent.埃尔c人格形态控制设定值卢克·天行者的NG.马克迪尔c

ng.getDirective()

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

使用这个,我们不仅可以确定哪些指令被应用到元素上,还可以访问特定的指令实例。让我们来看一个例子。

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

指令选择器'[SwrContent]'出口谱图实现了AfterContentInit/**指令的原生元素。*/私人埃尔HTMLElement构造函数私人只读的Elementref.ElementRef注入PLATFORM_ID私人只读的platformId对象私人只读的渲染器Renderer2ngAfterContentInit如果isplatformbrowser.platformId返回埃尔Elementref.nativeElement作为HTMLElement//省略

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

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

NG.getDirectives0

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

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

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

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

ng.getListeners ()

window.ng.getListeners()函数返回一系列DebugEventListener对象。使用DebugEventListener对象,你可以检查的名字触发每个侦听器的事件。

我没有发现这个特殊功能有多大用处,所以如果您知道一个用例,请在下面的评论中告诉我。

ng.getHostElement ()

window.ng.getHostElement ()函数接受一个指令(记住组件是一个带有模板的指令)并返回本机宿主元素。

让我们来看看一个例子:

cNG.GetComponent.“swr-people-list”埃尔NG.gethostelement.c检查埃尔

在这个例子中,我们:

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

ng.getViewComponent ()

由于文档指示:

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

在这个下一个例子中,我正在使用一个懒惰的路线,它呈现IndexComponent.组件被呈现为< router-outlet >元素,指示要在其中呈现路由的视图。你可能还注意到,这个出口在Angular中是用特殊的< ng-component >自定义元素。

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

埃尔“# userBtn”cNG.getViewComponent埃尔主持人NG.gethostelement.c

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

结论

Angular 9带有新的Ivy编译和渲染管道,提供了几个有用的全局可用函数,我们可以利用它们调试在浏览器中执行的Angular应用程序。yobet外围

布莱恩F爱

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