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

Question

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

示例来自 Angular2 step by step guide :

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

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

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

Answer 1

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

1. 添加test_lib.js到页面

2. 将 ELEMENT_PROBE_BINDINGS 添加到您的应用程序绑定(bind)。

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