Wie kann man auf die * angular 2 * Komponenten Daten in der Browser-Konsole zugreifen?

Question

Ich habe eine DisplayComponent und möchte die Daten in der Browser-/Entwicklerkonsole sehen. Wie kann ich es sehen?

Beispiel von Angular2 step by step guide:

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

Wie sehe ich this.myName in der/des Browsers Entwicklerkonsole?

* Bitte beachten Sie, dass dies eine Frage über Angular 2 und nicht Angular 1. Die suggested solution for AngularJS (Angular 1) funktioniert nicht.

Answer 1

Haben Sie einen einfachen Konsolenbefehl versucht?

console.log(this.myName) 

Hoffe ich verstehe Ihre Frage richtig.

Answer 2

Auschecken this plunker. Also im Grunde, was Sie brauchen in diesem Moment zu tun:

1. hinzufügen test_lib.js zur Seite

2. hinzufügen ELEMENT_PROBE_BINDINGS zu Ihren App Bindungen.

   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. Verwenden ng.probe Verfahren, das Element zu überprüfen:

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

Answer 3

Weitere Details finden https://www.pluralsight.com/guides/front-end-javascript/debugging-angular-2-applications#console