come accedere ai dati specifici del componente Angular2 nella console?

Esiste un modo per accedere ai dati specifici dei componenti specifici di Angular2 in console, a scopo di debug?

Come Angular1 ha la capacità di accedere al valore dei suoi componenti in console.

aggiornamento 4.0.0

Esempio di StackBlitz

aggiornare RC.1

Esempio di Plunker Nella console del browser in alto a sinistra (simbolo del filtro) selezionare plunkerPreviewTarget (o avviare l’app demo nella propria finestra) quindi immettere ad esempio

Seleziona un componente nel nodo DOM ed esegui nella console

 ng.probe($0); 

o per IE – grazie a Kris Hollenbeck (vedi commenti)

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

Alternativa

Suggerimento: abilitare gli strumenti di debug sovrascrive ng.probe()

Abilita strumenti di debug come:

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

Utilizzare sopra l’esempio Plunker e nell’esecuzione della console, ad esempio:

  • 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

Non ho ancora trovato il modo di indagare sulla direttiva Bar .

Una migliore esperienza di debug è fornita da Augury che si basa su questa API

originale (beta)

Ecco un riassunto su come farlo https://github.com/angular/angular/blob/master/TOOLS_JS.md

Abilitazione degli strumenti di debug

Di default gli strumenti di debug sono disabilitati. Puoi abilitare gli strumenti di debug come segue:

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

Utilizzo degli strumenti di debug

Nel browser apri la console per gli sviluppatori (Ctrl + Shift + j in Chrome). L’object di livello superiore è chiamato ng e contiene strumenti più specifici al suo interno.

Esempio:

 ng.profiler.timeChangeDetection(); 

Guarda anche

  • Angular 2: come abilitare il debug in angular2 dalla console del browser

Usa l’API sotto per accedere all’istanza del componente dopo aver selezionato il componente in chrome usando inspect.

 ng.probe($0).componentInstance 

Oppure in chrome puoi usare sotto le righe dove ‘app-root’ rappresenta il selettore css per il tuo elemento componente

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

Utilizzo della variabile dell’ambito globale (qualsiasi browser)

index.html

  

sul tuo file componente

 declare var test: any; 

Dopo ngOnInit() di quel file componente

Per esempio

 ngOnInit() { test = this; } 

Ora possiamo accedere a tutte le variabili e funzioni di quel componente inclusi i servizi (importati su quel componente).

Se vuoi impedire l’accesso al test per diciamo la produzione, puoi concedere condizionalmente l’accesso a test come:

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

Qui _configService indica l’istanza del servizio utilizzata da tutti i componenti e servizi.
Quindi la variabile sarebbe impostata come:

 export class ConfigService { prod = false; }