cómo acceder a los datos específicos del componente Angular2 en la consola?

¿Hay alguna forma de acceder a los datos específicos del componente específico de Angular2 en la consola, para fines de depuración?

Al igual que Angular1 tiene capacidad para acceder al valor de sus componentes en la consola.

actualización 4.0.0

Ejemplo de StackBlitz

actualizar RC.1

Ejemplo de Plunker En la consola del navegador en la parte superior izquierda (símbolo de filtro) seleccione plunkerPreviewTarget (o inicie la aplicación de demostración en su propia ventana) y luego introduzca, por ejemplo

Seleccione un componente en el nodo DOM y ejecútelo en la consola

 ng.probe($0); 

o para IE – gracias a Kris Hollenbeck (ver comentarios)

 ng.probe(document.getElementById('myComponentId')).componentInstance 

Alternativa

Sugerencia: habilitar herramientas de depuración anula ng.probe()

Habilite herramientas de depuración como:

 import {enableDebugTools} from '@angular/platform-browser'; bootstrap(App, []).then(appRef => enableDebugTools(appRef)) 

Utilice el ejemplo anterior de Plunker y en la consola ejecute, por ejemplo:

  • ng.profiler.appRef
  • ng.profiler.appRef._rootComponents[0].instance
  • ng.profiler.appRef._rootComponents[0].hostView.internalView
  • ng.profiler.appRef._rootComponents[0].hostView.internalView.viewChildren[0].viewChildren

No he encontrado una manera de investigar la directiva del Bar .

Augury proporciona una mejor experiencia de depuración que se basa en esta API

original (beta)

Aquí hay un resumen de cómo hacerlo https://github.com/angular/angular/blob/master/TOOLS_JS.md

Habilitando herramientas de depuración

Por defecto, las herramientas de depuración están deshabilitadas. Puede habilitar las herramientas de depuración de la siguiente manera:

 import {enableDebugTools} from 'angular2/platform/browser'; bootstrap(Application).then((appRef) => { enableDebugTools(appRef); }); 

Usar herramientas de depuración

En el navegador, abra la consola del desarrollador (Ctrl + Shift + j en Chrome). El objeto de nivel superior se llama ng y contiene herramientas más específicas dentro de él.

Ejemplo:

 ng.profiler.timeChangeDetection(); 

Ver también

  • Angular 2: cómo habilitar la depuración en angular2 desde la consola del navegador

Use la API inferior para acceder a la instancia del componente después de seleccionar el componente en cromo usando inspeccionar.

 ng.probe($0).componentInstance 

O en Chrome, podría usar las líneas a continuación donde ‘app-root’ representa el selector css para su elemento componente

 ng.probe($$('app-root')[0]).componentInstance 

Usando la variable de scope global. (Cualquier navegador)

index.html

  

en su archivo de componente

 declare var test: any; 

Después de ngOnInit() de ese archivo componente

Por ejemplo

 ngOnInit() { test = this; } 

Ahora podemos acceder a todas las variables y funciones de ese componente, incluidos los servicios (importados en ese componente).

Si desea evitar el acceso a la test para, por ejemplo, producción, puede otorgar acceso condicionalmente para realizar test como:

 constructor(private _configService: ConfigService) { } ngOnInit() { if(_configService.prod) { test = this; } } 

Aquí _configService significa la instancia de servicio utilizada por todos los componentes y servicios.
Así que la variable se establecería como:

 export class ConfigService { prod = false; }