Angular2 コンポーネントの開発手順の詳細な説明

今回は、Angular2 コンポーネントを開発する手順について詳しく説明します。Angular2 開発コンポーネントの 注意事項 について、実際のケースを見てみましょう。

まず、ng1 から ng2 のフレームワークにおけるコンポーネントの責任とステータスについて簡単に説明します。

ng1 の主要な機能 - 命令。属性タイプ、ラベル タイプ、CSS タイプ、および注釈タイプに分類されます。 CSS クラスやコメントで書かれたコンポーネントはおそらくほとんどの人が使用しないでしょうが、属性タイプの命令とラベルタイプの命令は、世界で ng1 が人気を博した要因の 1 つです。 ng2では、タグ型の命令が単純に分離され、Vueや呼ばれるコンポーネントなどの新興勢力のスタイルに従ってアップグレードされ、表示データやアニメーションを含むView(DOM)を扱う全てのものを扱うために使用されます。属性命令は、ユーザー入力の受信、ユーザーのクリックやその他のイベントへの応答など、コンポーネントの機能を向上させるために使用されます。実際、ng2 に埋め込まれている多くの関数は、ngFor、ngIf などの属性ベースの命令であり、コンポーネントは特定のプロジェクトに依存しているため、ユーザーに見えるインターフェイスを記述するにはプロジェクトに基づいたコンポーネントを使用するのが適しています。同時に、コンポーネントはルーティングも処理する必要があります。フロントエンド ルーティングは、DOM を動的に変更することと見なすことができます。ng2 ルーティングでは、実際には、さまざまなコンポーネントを動的にレンダリングまたは破棄して、フロントエンド ページの切り替えを実現します。

次に、以前のプロジェクトで ng2 コンポーネントを使用して Web サイトを構築した方法について話しましょう:

1. 公式の慣例によれば、各アプリケーションにはルート コンポーネントが必要です。

2. 各ルーティング エントリがコンポーネントを指し、各コンポーネントがページをレンダリングします。

3. プロジェクトが拡大するにつれて、単一のモジュールではビジネス分類を満たすことができなくなるため、ルート ルートが各サブモジュールの遅延読み込みをガイドし、サブモジュールのサブルートが特定のサブコンポーネントを指すようになります。それぞれのページをレンダリングします。

4. 単一のサブコンポーネントによってレンダリングされる単一のページに焦点を当てると、実際にいくつかの再利用可能なタグ ブロックを新しいコンポーネントにカプセル化できます (ngFor トラバーサルを必要とする複雑なデータ項目など)。

5. 一部のコンポーネント (サイド ボタンやメッセージ モーダル ボックスなど) は実際にはプロジェクト全体で使用される可能性があり、これらはグローバルに共有されるコンポーネントにカプセル化する必要があることがわかりました。

まだ少し混乱しているように感じますが、その理由はおそらくコンポーネントの名前です。ng2 フレームワークでは、ルーティング ページからデータ エントリに至るまでのコンポーネントがすべて同じ方法で使用されるのは避けられないからです。同じ申告方法だと面倒になります。

自分でコンポーネントを細分化し続けるしかないので、作者は ng2 のコンポーネントを次の 4 つのカテゴリに分けました:

ページコンポーネント

• ルーティングを扱うときは、ルーティングルールの一致と、このクラス コンポーネントは、宣言時にセレクター パラメーターを必要としません (ルートの位置決めのみに特定のラベルは必要ありません)

• は ルーティング パラメーター を受け取るか、データを解決し、他のビジネス インタラクション リクエストを行わないようにして、設定しません。入力変数と出力変数

レイアウトコンポーネント

• ページが単純な場合は、ページ内で使用する必要があるため、ユニットコンポーネントを直接使用する必要があります。

• はルートの取得を担当しません。また、データをリクエストするのではなく、入力イベントを通じてデータを渡すか、出力イベントに応答するようにしてください。すべてのビジネス インタラクション リクエストは、可能な限りレイアウト コンポーネント内で完了する必要があります。 (ページコンポーネントに配置するほど煩雑ではなく、各レイアウトコンポーネントは相互に作用できます)。通常、独自のモジュールで再利用可能であり、さまざまな属性タイプの命令を通じて変更されます

は、ユニットレベルで繰り返されるタグを簡素化するために使用されます。たとえば、取得されたリストデータ内の各データ項目のインターフェース表示をユニットにカプセル化できます。コンポーネント

は、入力を通じてデータを渡して表示し、外部レイアウトコンポーネントまたはページコンポーネントへの出力を通じてイベントに応答することのみを担当します。
• 共有コンポーネントを処理するには、

• する必要があります。プロジェクト全体で共有されるコンポーネントであるセレクターがあり、比較的自由に実装でき、プロジェクト全体で重複コードを減らし、メンテナンスを容易にすることに重点を置いています

• 適切な例には、メッセージ ポップアップ、プログレス バー の読み込みなどが含まれます。

• ほとんどの属性ベースの命令は、実際には一般に機能がより汎用的であり、共有コンポーネントと同じように扱うことができます。共有命令は、共通の機能を実装するためにのみ使用されます

実際、技術的な問題はまったくありません。それは、プロジェクト ディレクトリの配置が非常に重要であるということを意味するだけです。

ng2 は、作成者が細分化したコンポーネントの種類を知りません。これらのカテゴリは、この分類システムに基づいたプロジェクトの ディレクトリ構造 です。

作者はフォルダー名の前にいくつかのプラス記号といくつかのマイナス記号を追加しました。これは、私自身の一見奇妙なディレクトリ構造の配置とみなすことができます。

説明: 最も外側の + 用語は、遅延読み込みモジュール全体のディレクトリを表します。 内側にプラス記号が付いているコンポーネントは、ページ コンポーネントを表します。 記号のないコンポーネントは、レイアウト コンポーネントを表します。レイアウト コンポーネントの代表的なコンポーネントはユニット コンポーネントです。ユニット コンポーネントは遅延ロード モジュール全体で使用できるため、レイアウト コンポーネントはすべて同じレベルのディレクトリにあります。特定のページコンポーネント。

要約すると、ES6 と TypeScript の外観はさておき、ng2 コンポーネントの使用は技術的には難しくありません。もちろん、この記事は著者の現在の経験では十分とは言えません。将来的には、ng2 ソース コードを開発して徹底的に研究し、より深い洞察を得る予定です。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

jsは写真の均一なフェードインとフェードアウトを実現します

JSで数値と文字列を変換する方法

以上がAngular2 コンポーネントの開発手順の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。