デバッグ角度9

2413 ワード
webdev html javascript angular テキストリンク
角度9アイビー実行時は、新しいものを提供します ng object for debugging Angular アプリケーションでは、devモードで起動します.
あなたができることを考えましょう.

このGIFには、次の手順があります.
  • あなたの角度9アプリを実行
  • Chrome開発ツールを開く
  • コンポーネントの要素を選択する
  • 次のコードをコンソールに入力します

    • Note that my angular app has a component with an array of heroes. Each hero has a name and a description. Change the code below to reflect your app.


    // get the component you selected in the Elements panel
heroListComp = ng.getComponent($0); 

// Clone the first hero
before = {...heroListComp.heroes[0]};

// Change the first hero's name
heroListComp.heroes[0].name = 'Oliver';

// Clone the first hero, after your changes
after = {...heroListComp.heroes[0]};

// Display the before and after
console.table({before, after})

// Apply the changes (so you can see them in the View)
ng.applyChanges($0)
    我々はいくつかのng 特集ここ.the ng.getComponent() 関数は、要素に関連付けられたコンポーネントを取得します.これはコンポーネントである要素を通過したためです.要素がコンポーネント(divのような)でないならば、それはNULLを返します.このシリーズの次の記事は、コンポーネントを取得するいくつかの他のテクニックが表示されます.
    また、ng.applyChanges() 関数を実行する角度の変更検出を伝える.

    もっと学ぶ
    かなりクール!これは、角度9の新機能の一つです.詳しくはこちらをご覧くださいarticle on 7 new features in Angular 9 .
    また、これらの偉大な新しい角度9ツールをここでつかむことができます

  • VS Code エディタ

  • Angular Essentials Extension VSコード

  • Angular Language Service VSコード
    • 白駿1162道路舗装(JAVA)
    DrawerLayoutで簡単な引き出し効果を実現