如何在浏览器的控制台中访问* 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添加到您的应用绑定中。

   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

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

有关详细信息，请参阅https://www.pluralsight.com/guides/front-end-javascript/debugging-angular-2-applications#console

Answer 3

您是否尝试过简单的控制台命令？

console.log(this.myName)

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