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

Question

我有一个DisplayComponent，我想在浏览器/开发人员的控制台中看到它的数据。我怎么能看到呢？

Angular2分步指南中的示例：

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

如何在浏览器/开发人员的控制台中查看this.myName？

*请注意，这是一个关于角2的问题，而不是角1。AngularJS（Angular 1）的建议解决方案不起作用。

Answer 1

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

console.log(this.myName)

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

Answer 2

var componentTag=文档。查询选择器（'.component标记'）；var componentDetails=窗口。ng。探头（厨房水槽）；组件详细信息。组件状态

更多详情见https://www.pluralsight.com/guides/front-end-javascript/debugging-angular-2-applications#console

Answer 3

看看这个柱塞。所以基本上你现在需要做的是：

>

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