web-dev-qa-db-ja.com

コンソールでAngular2コンポーネント固有のデータにアクセスする方法は？

デバッグ目的で、コンソールでAngular2固有のコンポーネント固有のデータにアクセスする方法はありますか？

Angular1のように、コンソールでそのコンポーネントの値にアクセスする機能があります。

debuggingconsoleangular
33
Pankaj Parkar

update 4.0.0

StackBlitzの例

RC.1を更新

Plunkerの例 ブラウザーコンソールの左上（フィルターシンボル）でplunkerPreviewTargetを選択（または起動デモアプリを独自のウィンドウで）次に入力します

DOMノードでコンポーネントを選択し、コンソールで実行します

_ng.probe($0);
_

またはfor IE-Kris Hollenbeckに感謝（コメントを参照）

_ng.probe(document.getElementById('myComponentId')).componentInstance
_

代替

ヒント：デバッグツールを有効にすると、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を基盤とするAuguryにより、より優れたデバッグエクスペリエンスが提供されます。

オリジナル（ベータ）

これを行う方法の概要は次のとおりです https://github.com/angular/angular/blob/master/TOOLS_JS.md （リンク切れで、代替品が見つかりません）。

デバッグツールを有効にする

デフォルトでは、デバッグツールは無効になっています。次のようにデバッグツールを有効にできます。

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

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

デバッグツールの使用

ブラウザで開発者コンソールを開きます（ChromeではCtrl + Shift + j）。最上位のオブジェクトはngと呼ばれ、その中により具体的なツールが含まれています。

例：

_ng.profiler.timeChangeDetection();
_

こちらもご覧ください

50
Günter Zöchbauer

Inspectを使用してchromeでコンポーネントを選択した後、以下のAPIを使用してコンポーネントインスタンスにアクセスします。

ng.probe($0).componentInstance

またはchrome以下の行を使用できます。'app-root 'はコンポーネント要素のCSSセレクターを表します

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

または、以下に示すようにグローバルウィンドウスコープで関数を登録することにより、以下のようにショートカットを作成できます。次に、コンポーネント内の任意の要素をクリックして、コンソールから「e（）」を呼び出します

window['e'] = () => eval('ng.probe($0).componentInstance');
28
Anoop Isaac

グローバルスコープ変数の使用（任意のブラウザー）

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;
}
_
11
vusan