Angularコンポーネント

1760 ワード

1.コンポーネントの理解


コンポーネントは特殊な命令であり、より簡単な構成項目を使用してコンポーネントベースのアプリケーションアーキテクチャを構築することで、appを簡単に書くことができ、類似のweb Componentやangular 2のスタイルを通じて書くことができます.web Componentは仕様です.もうすぐスタンダードになります.アプリケーション・コンポーネントの利点:通常の命令構成よりも簡単にデフォルト設定とベストプラクティスを提供し、構築ベースのアプリケーション・アーキテクチャを最適化します.angular 2のアップグレードはよりスムーズです.
構築しない場合:compileまたはpre-linkフェーズで操作を実行するコマンドに対して、そのフェーズに到達できないため、コンポーネントは使用できません.命令のpriority,terminal,multi-elementを定義したい場合は、使用できません.コンポーネントは要素ラベルでのみトリガーでき、その他はコマンドのみ使用できます.

2.コンポーネントの作成と構成


コンポーネントは使用できます.component登録(angular.moduleで作成したmodule).このメソッドには、2つのパラメータコンポーネント名コンポーネント構成オブジェクト(コマンドとは異なり、1つはファクトリメソッド、1つはオブジェクト)があります.

3.コンポーネントベースのアプリケーションアーキテクチャ


コンポーネントベースのアプリケーションをコンポーネントで構築するのは簡単で便利だとよく言われています.コンポーネントはビューとデータのみを制御します.コンポーネントは、役割ドメイン以外のDOMまたはデータを変更する必要はありません.angularではscopeがプロトタイプで継承され観察されるため、任意の場所のデータを変更することができます.これは実践的ですが、プログラムのどの部分がデータの修正を担当しているのか分からないという問題があります.コンポーネントには定義の良い共通api-入力と出力があります.しかし、angularは双方向バインドを使用するため、分離された役割ドメイン能力は限られている.したがって、コンポーネントにオブジェクトを渡すとbindings:{item:'='}でプロパティを変更すると、この変更は親コンポーネントに反射します.コンポーネントにとって、自分のデータを構築してこそ自分で修正することができ、データが修正されると、誰が修正したのかを簡単に見つけることができます.このため、コンポーネントはいくつかの簡単な規範に従うべきである.入力には<と@bindingsを使用するべきである.
    bindings:{            
      hero: '     
     
    

コンポーネントには良い声明があります.各コンポーネントはライフサイクルフックを実現しています.これらのフックは、このコンポーネントがライフサイクルで呼び出される方法です.コンポーネントは、次のフックメソッドを実装します.
. $onInit() --

アプリケーションがコンポーネントであるツリーは、理想的には、プログラム全体がコンポーネントツリーである必要があります.このツリーは、明確な入力と出力を定義します.さらに、双方向バインドを最小限に抑えることで、コンポーネントのデータと状態がより明確になり、予測、判断が容易になります.