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

Question

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

Angular2分步指南示例:

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

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

*请注意,这是关于Angular 2而不是Angular 1的问题.AngularJS(Angular 1)的建议解决方案不起作用.

Answer 1

看看这个plunker.所以基本上你现在需要做的是:

1. 将test_lib.js添加到页面

2. 添加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));
   

3. 使用ng.probe方法检查元素:

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

Answer 2

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

console.log(this.myName)

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