Question

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

类似于Angular1有能力在控制台中访问其组件值。

Answer 1

更新4.0.0

更新RC.1

Plunker example在左上角的浏览器控制台（过滤器符号）中选择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://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();

另见

Answer 2

使用inspect来选择chrome中的组件后，使用以下API访问组件实例。

ng.probe($$('app-root')[0]).componentInstance

或者在chrome中，您可以使用以下行，其中＆＃39; app-root＆＃39;表示组件元素的css选择器

{{1}}

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;
}

Answer 4

令我感到惊讶的是，这里没有人提到Augury，它是一个Chrome插件，可让您方便地访问组件中的所有信息，还可以更轻松地在控制台中直接查看这些信息：