如何在浏览器的控制台中访问 *angular 2* 组件的数据？答案

【问题标题】：How to access the *angular 2* components' data in the browser's console?如何在浏览器的控制台中访问 *angular 2* 组件的数据？
【发布时间】：2015-11-10 05:03:31
【问题描述】：

我有一个 DisplayComponent，我想在浏览器/开发者的控制台中查看它的数据。怎么看？

来自Angular2 step by step guide的示例：

function DisplayComponent() {
  this.myName = "Alice";
}

如何在浏览器/开发者的控制台中看到this.myName？

* 请注意，这是关于 Angular 2 而不是 Angular 1 的问题。suggested solution for AngularJS (Angular 1) 不起作用。

【问题讨论】：

我为您的问题创建了the issue
我在这里找到的调试 Angular 2 应用程序的好博客：pluralsight.com/guides/front-end-javascript/… 它向我指出了 augury.angular.io，它是 ng2 应用程序开发的绝佳工具。 ;)

标签： angular google-chrome-console

【解决方案1】：

你试过简单的控制台命令吗？

console.log(this.myName)

希望我能正确理解您的问题。

【讨论】：

我想他想从开发者工具的控制台获取组件。比如：document.querySelector('.compnent-selector').component.myName;
对。我需要在开发者的控制台中写什么？

【解决方案2】：

查看this plunker。所以基本上你现在需要做的是：

在页面中添加test_lib.js

将ELEMENT_PROBE_BINDINGS 添加到您的应用绑定中。

import { bootstrap } from 'angular2/angular2'
import { ELEMENT_PROBE_BINDINGS} from 'angular2/debug'
import { App } from './app'

bootstrap(App,ELEMENT_PROBE_BINDINGS )
    .catch(err => console.error(err));

使用ng.probe方法检查元素：

const app = document.querySelector('my-app');
const debugElement = ng.probe(app);

【讨论】：

ELEMENT_PROBE_BINDINGS 在 angular2 的新版本中不存在，它被重命名为 ELEMENT_PROBE_PROVIDERS 并且在 ng2 lib 的 github 源中很少提及，它似乎完全消失了。而且也没有 angular2/debug 了。请问您能具体回答一下吗？
所以实际状态（在 angular4 上测试）是，在开发模式（ng serve）下，您不需要执行第 1 步和第 2 步。您可以直接跳到第 3 步。快乐编码： )
从控制台更新值时如何触发更改？

【解决方案3】：

var componentTag = document.querySelector('.component-tag'); var componentDetails = window.ng.probe(kitchenSink); componentDetails.componentInstance

【讨论】：