Как получить доступ к данным на компоненте Angular2 в консоли?

Question

Есть ли какой-либо способ получить доступ к конкретным данным по конкретному компоненту Angular2 в консоли для целей отладки?

Как и у Angular1, есть возможность получить доступ к его компонентам в консоли.

Answer 1

обновление 4.0.0

StackBlitz example

обновление RC.1

Plunker example В консоли браузера на верхнем левом углу (символ фильтра) выберите plunkerPreviewTarget (или запустить демо приложение в его собственном окне), затем введите, например,

Выберите компонент в DOM n ода и выполнить в консоли

ng.probe($0); 

Alternative

Подсказка: включение отладки инструментов переопределяет ng.probe()

Включить отладочные инструменты, такие как:

import {enableDebugTools} from '@angular/platform-browser'; 

bootstrap(App, []).then(appRef => enableDebugTools(appRef)) 

Использование выше примере Plunker и в консоли выполните, например:

• 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

Я не нашел способ еще исследовать Bar директиву.

Лучший опыт отладки обеспечивается предзнаменование, который строит на этом API

• https://augury.angular.io/
• https://www.youtube.com/watch?v=b1YV9vJKXEA

оригинал (бета)

Вот резюме, как сделать это https://github.com/angular/angular/blob/master/TOOLS_JS.md

Включение отладки инструментов

По умолчанию отладочных инструментов отключены.Вы можете включить отладочные инструменты следующим образом:

import {enableDebugTools} from 'angular2/platform/browser'; 

bootstrap(Application).then((appRef) => { 
    enableDebugTools(appRef); 
}); 

Использование отладочных инструментов

В браузере откройте консоль разработчика (Ctrl + Shift + J в Chrome). Объект верхнего уровня называется ng и содержит в нем более конкретные инструменты.

Пример:.

ng.profiler.timeChangeDetection(); 

Смотри также

• Angular 2: How enable debugging in angular2 from browser console

Answer 2

Использование глобальной переменной области действия (любой браузер)

index.html

<script> 
    var test; 
</script> 

на файле компонента

declare var test: any; 

После ngOnInit() этого файла компонента

Например

ngOnInit() { 
    test = this; 

} 

Теперь мы можем получить доступ каждые переменные и функции этого компонента, включая услуги (импортированные на этом компоненте).

Если вы хотите, чтобы предотвратить доступ к test для, скажем, производство, вы можете условно дать доступ к test как:

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

} 

Здесь _configService означает экземпляр службы, используемой всеми компонентами и услуг.
Так переменные будут установлены как:

export class ConfigService { 
    prod = false; 
} 

Answer 3

Использования ниже API к экземпляру компоненты доступа после выбора компонента в хроме с помощью осмотра.

ng.probe($0).componentInstance