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


How to access the *angular 2* components' data in the browser's console?

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

Angular2循序渐进指南中的示例：

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

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

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

相关讨论

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

  • 向页面添加test_lib.js

  • 将ELEMENT_PROBE_BINDINGS添加到应用程序绑定中。

    1
    2
    3
    4
    5
    6
    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方法检查元素：

    1
    2
    const app = document.querySelector('my-app');
    const debugElement = ng.probe(app);
    • 相关讨论

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

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

    相关讨论

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

    1
    console.log(this.myName)

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

    相关讨论