如何在控制台中访问Angular2组件特定数据？

Question

有没有办法在控制台中访问Angular2特定组件特定数据,以进行调试？

就像Angular1能够在控制台中访问其组件值一样.

Answer 1

更新4.0.0

StackBlitz的例子

更新RC.1

Plunker示例在左上角的浏览器控制台(过滤器符号)中选择plunkerPreviewTarget(或在其自己的窗口中启动演示应用程序),然后输入示例

在DOM节点中选择一个组件并在控制台中执行

ng.probe($0);

或IE浏览器 - 感谢Kris Hollenbeck(见评论)

ng.probe(document.getElementById('myComponentId')).componentInstance

替代

提示:启用调试工具覆盖 ng.probe()

启用调试工具,例如:

import {enableDebugTools} from '@angular/platform-browser';

bootstrap(App, []).then(appRef => enableDebugTools(appRef))

使用上面的Plunker示例并在控制台中执行例如:

• ng.profiler.appRef
• ng.profiler.appRef._rootComponents[0].instance
• ng.profiler.appRef._rootComponents[0].hostView.internalView
• ng.profiler.appRef._rootComponents[0].hostView.internalView.viewChildren[0].viewChildren

我还没有找到解决该Bar指令的方法.

Augury提供了更好的调试体验,它基于此API构建

• https://augury.angular.io/
• https://www.youtube.com/watch?v=b1YV9vJKXEA

原始(测试版)

以下是如何做到这一点的摘要https://github.com/angular/angular/blob/master/TOOLS_JS.md

启用调试工具

默认情况下,禁用调试工具.您可以按如下方式启用调试工具:

import {enableDebugTools} from 'angular2/platform/browser';

bootstrap(Application).then((appRef) => {
  enableDebugTools(appRef);
});

使用调试工具

在浏览器中打开开发人员控制台(Chrome中的Ctrl + Shift + j).顶级对象称为ng,其中包含更多特定工具.

例:

ng.profiler.timeChangeDetection();

也可以看看

• Angular 2:如何从浏览器控制台启用angular2中的调试

Answer 2

使用inspect选择chrome中的组件后,使用以下API访问组件实例.

ng.probe($0).componentInstance

或者在chrome中,您可以使用下面的行,其中'app-root'表示组件元素的css选择器

ng.probe($$('.image-picker')[0]).componentInstance

Answer 3

使用全局范围变量.(任何浏览器)

的index.html

<script>
    var test;
</script>

在您的组件文件上

declare var test: any;

在ngOnInit()该组件文件之后

例如

ngOnInit() {
   test = this;

}

现在我们可以访问该组件的每个变量和功能,包括服务(在该组件上导入).

如果你想阻止访问test让我们说生产,你可以有条件地提供访问权限test:

constructor(private _configService: ConfigService) {
}
ngOnInit() {
   if(_configService.prod) {
      test = this;
   }

}

这里_configService表示所有组件和服务使用的服务实例.
所以变量将被设置为:

export class ConfigService {
   prod = false;
}