Angularフレームワークのビュー抽象定義の詳細な説明

Angularフレームワークのビュー抽象定義の詳細な説明

序文

「大規模なフロントエンド プロジェクト向け」に設計されたフロントエンド フレームワークである Angular には、実際に参照して学習する価値のある設計が数多くあります。このシリーズでは、主にこれらの設計と機能の実装原則を学習します。この記事では主に、Angular のビューに関連するいくつかの定義を紹介します。

Angular でのビューの抽象化

Angular バージョンは、ブラウザー、モバイル プラットフォーム、Web Worker など、さまざまなプラットフォームで実行できます。したがって、プラットフォーム固有の API とフレームワーク インターフェイスの間には、一定レベルの抽象化が必要です。

Angular は、抽象化によって異なるプラットフォーム間の違いをカプセル化し、ElementRef、TemplateRef、ViewRef、ComponentRef、ViewContainerRef などの参照タイプの形式で表示されます。

抽象クラスビュー定義

ソースコードを読むときに、これらの定義の違いが明確でないと混乱しやすくなります。それでは、まずそれらの違いを理解しましょう。

要素 ElementRef

ElementRef は最も基本的な抽象化です。クラス構造を見ると、それに関連付けられたローカル要素のみが含まれていることがわかります。

ElementRef<T = any>クラスをエクスポートします。
 // ネイティブ要素への直接アクセスがサポートされていない場合、基礎となるネイティブ要素は null になります (たとえば、アプリケーションが Web Worker で実行されている場合)
 パブリックネイティブ要素: T;
 コンストラクター(ネイティブ要素: T) {
 this.nativeElement = ネイティブ要素;
 }
 ...
}

この API は、document.getElementById('myId') と同様に、ネイティブ DOM 要素に直接アクセスするために使用できます。ただし、Angular では直接使用は推奨されていません。 Angular が提供するテンプレートとデータ バインディングをできるだけ使用するようにしてください。

テンプレート参照

Angular では、テンプレートを使用して、コンポーネントのビューを HTML でレンダリングする方法のコードを定義します。

テンプレートは、@Component() デコレータを通じてコン​​ポーネント クラスに関連付けられます。テンプレート コードは、テンプレート プロパティの値としてインラインで提供することも、templateUrl プロパティを介して別の HTML ファイルにリンクすることもできます。

TemplateRef オブジェクトによって表されるその他のテンプレートは、複数の異なるコンポーネントから取得できる代替ビューまたは埋め込みビューを定義するために使用されます。 TemplateRef は、アプリケーション全体のビューで再利用できる DOM 要素 (ElementRef) のセットです。

抽象クラスTemplateRef<C>をエクスポートします。
 //この埋め込みビューの親ビュー内のアンカー要素 abstract get elementRef(): ElementRef;
 // このテンプレートに基づいて埋め込みビューをインスタンス化し、ビュー コンテナーに添付します。abstract createEmbeddedView(context: C): EmbeddedViewRef<C>;
 ...
}

TemplateRef クラス自体は、次の要素のみで構成される単純なクラスです。

elementRef属性: ホスト要素への参照を保持します
createEmbeddedView メソッド: ビューを作成し、その参照を ViewRef として返します。
テンプレートは、プレーン HTML と Angular のデータ バインディング構文、ディレクティブ、テンプレート式を組み合わせます。 Angular 要素は、ページが表示される前に HTML 要素を変更するためにそれらの値を挿入または計算します。

Angular のビュー

Angular では、ビューは、一緒に作成および破棄される表示可能な要素の最小のグループ化単位です。 Angular の哲学では、開発者が UI を (独立した HTML タグのツリーではなく) ビューの構成として考えることを推奨しています。

コンポーネント クラスとそれに関連付けられたテンプレートによってビューが定義されます。具体的な実装では、ビューはコンポーネントに関連付けられた ViewRef インスタンスによって表されます。

参照表示

ViewRef は Angular ビューを表します。

エクスポートして抽象クラス ViewRef を宣言し、ChangeDetectorRef を拡張します {
  // ビューとそれに関連付けられたすべてのデータ構造を破棄します。abstract get destroy(): boolean;
  // このビューが破棄されたかどうかを報告します abstract destroy(): void;
  // ビューに対して開発者が定義した他のクリーンアップ関数を提供するライフサイクル フック abstract onDestroy(callback: Function): any;
}

その中で、ChangeDetectorRef は変更検出関数の基本クラスを提供します。これは、変更検出ツリーで変更をチェックするすべてのビューを収集するために使用されます。

エクスポート抽象クラスChangeDetectorRefを宣言します{
  // 入力が変更されたり、ビューでイベントが発生したりすると、コンポーネントは通常、ダーティ(再レンダリングが必要)としてマークされます。
  // これらのトリガーが発生しない場合でもコンポーネントがチェックされるようにするには、このメソッドを呼び出します。abstract checkNoChanges(): void;
  // 変更検出ツリーからビューを切り離します。切り離されたビューは、再度接続されるまでチェックされません。
  // ローカル変更検出チェックを実装するには、detectChanges() と組み合わせて使用​​します。abstract detach(): void;
  // このビューとその子をチェックし、detach() と共に使用してローカル変更検出チェックを実装します。abstract detectChanges(): void;
  // 変更検出器とその子をチェックし、変更が検出された場合はこの例外をスローします。abstract markForCheck(): void;
  // 以前にデタッチされたビューを変更検出ツリーに再アタッチします // デフォルトでは、ビューはツリーにアタッチされます abstract reattach(): void;
}

2種類のビュー

Angular は次の 2 種類のビューをサポートしています。

(1)テンプレート(template)にリンクされた埋め込みビュー(embeddedView)。

埋め込みビューは、ビュー コンテナー内の Angular ビューを表します。テンプレートはビューを保持する単なる設計図であり、上記の createEmbeddedView メソッドを使用してテンプレートからビューをインスタンス化できます。

(2)コンポーネントのホストビュー(hostView)へのリンク

コンポーネントに直接属するビューはホスト ビューと呼ばれます。

コンポーネントが動的にインスタンス化されるときに、ホスト ビューが作成されます。ComponentFactoryResolver を使用して、コンポーネントを動的に作成およびインスタンス化できます。 Angular では、各コンポーネントは特定のインジェクター インスタンスにバインドされるため、コンポーネントを作成するときに現在のインジェクター インスタンスを渡します。

ビュー内の個々の要素のプロパティは、ユーザーのアクションに応じて動的に変更できますが、それらの要素の構造 (数や順序) は変更できません。ビュー コンテナーに埋め込まれたビューを挿入、移動、または削除することで、これらの要素の構造を変更できます。

ビューコンテナ参照

ViewContainerRef は、コンポーネントに 1 つ以上のビューをアタッチできるコンテナーです。

エクスポート抽象クラスViewContainerRefを宣言します{
  // アンカー要素。コンテナーを含むビュー内でのこのコンテナーの位置を指定するために使用されます // 各ビュー コンテナーにはアンカー要素を 1 つだけ含めることができ、各アンカー要素にはビュー コンテナーを 1 つだけ含めることができます abstract get element(): ElementRef;
  //このビューコンテナのDI
  抽象 get injector(): Injector;
  // このコンテナに現在アタッチされているビューの数 abstract get length(): number;
  // このコンテナ内のすべてのビューを破棄します abstract clear(): void;
  // 単一のコンポーネントをインスタンス化し、そのホスト ビューをこのコンテナーに挿入します。abstract createComponent<C>(componentFactory: ComponentFactory<C>, index?: number, injector?: Injector, projectableNodes?: any[][], ngModule?: NgModuleRef<any>): ComponentRef<C>;
  // 埋め込みビューをインスタンス化して挿入します abstract createEmbeddedView<C>(templateRef: TemplateRef<C>, context?: C, index?: number): EmbeddedViewRef<C>;
  // ビューを破棄せずにこのコンテナーからデタッチします abstract detach(index?: number): ViewRef | null;
  // このコンテナからビューを取得します abstract get(index: number): ViewRef | null;
  // 現在のコンテナ内のビューのインデックスを返します abstract indexOf(viewRef: ViewRef): number;
  // ビューをこのコンテナ内の新しい位置に移動します abstract insert(viewRef: ViewRef, index?: number): ViewRef;
  抽象移動(viewRef: ViewRef、currentIndex: number): ViewRef;
  // このコンテナにアタッチされているビューを破棄します。abstract remove(index?: number): void;
}

任意の DOM 要素をビュー コンテナーとして使用できます。Angular は要素内にビューを挿入するのではなく、ViewContainer にバインドされた要素の後にビューを追加します。

通常、ViewContainer を作成する場所をマークするには、ng-container 要素が最適です。 DOM に余分な HTML 要素が導入されないように、コメントとしてレンダリングされます。

ViewContainerRef を使用すると、createComponent() メソッドでコンポーネントをインスタンス化するときにホスト ビューを作成したり、createEmbeddedView() メソッドで TemplateRef をインスタンス化するときに埋め込みビューを作成したりできます。

ビュー コンテナーのインスタンスには、他のビュー コンテナーを含めて階層ビュー (ビュー ツリー) を作成することもできます。

階層を表示

Angular では、ビューは通常、ビュー階層に編成されます。ビュー ツリーは、全体として機能する関連ビューのツリーであり、Angular 変更検出の重要なコンポーネントの 1 つです。

ビュー ツリーのルート ビューは、コンポーネントのホスト ビューです。ホスト ビューは、ホスト コンポーネント上のビュー コンテナー (ViewContainerRef) に収集される埋め込みビュー ツリーのルートになることができます。ビュー ツリーは、ユーザーがアプリケーション内を移動すると (たとえば、ルーターを使用して) 動的にロードおよびアンロードできます。

ビュー ツリーとコンポーネント ツリーは 1 対 1 に対応していません。

  • 指定されたビューツリーコンテキストに埋め込まれたビュー。他のコンポーネントのホストビューになることもあります。
  • コンポーネントは、ホスト コンポーネントと同じ NgModule 内にある場合もあれば、別の NgModule に属している場合もあります。

コンポーネント、テンプレート、ビュー、モジュール

Angular では、コンパニオン テンプレートを通じてコン​​ポーネントのビューを定義します。テンプレートは、Angular にコンポーネントをレンダリングする方法を指示する HTML です。

ビューは通常、階層的に編成されており、UI パーティションまたはページの単位として変更、表示、または非表示にすることができます。コンポーネントに直接関連付けられたテンプレートは、そのコンポーネントのホスト ビューを定義します。コンポーネントは、他のコンポーネントのホストとして機能するいくつかの埋め込みビューを含むビュー階層を定義することもできます。

ビュー階層には、同じモジュール (NgModule) 内のコンポーネントのビューを含めることができ、他のモジュールで定義されたコンポーネントのビューを含めることもできます (多くの場合、そうします)。

要約する

この記事では、ElementRef、TemplateRef、ViewRef、ComponentRef、ViewContainerRef など、Angular の要素、ビュー、テンプレート、コンポーネントにおけるビュー関連の定義について簡単に説明します。

その中でも、ビューは Angular のアプリケーション UI の基本的な構成要素であり、一緒に作成および破棄される要素の最小のグループです。

ViewContainerRef は主に、埋め込みビューまたはコンポーネント ビューの作成と管理に使用されます。コンポーネントは、テンプレートを構成することによってビューを定義できます。コンポーネントに直接関連付けられたテンプレートは、コンポーネントのホスト ビューを定義します。コンポーネントには埋め込みビューを含めることもできます。

Angularフレームワークのビュー抽象定義の詳細説明に関するこの記事はこれで終わりです。より関連性の高いAngularビュー抽象定義コンテンツについては、123WORDPRESS.COMの以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも123WORDPRESS.COMをよろしくお願いいたします。

参照する

  • Angularコンポーネントの紹介
  • Angular 用語集
  • ViewContainerRef を使用した Angular DOM 操作テクニックの探索
以下もご興味があるかもしれません:
  • Angular のパフォーマンス最適化: サードパーティ コンポーネントと遅延読み込みテクノロジー
  • AngularJSにおける括弧の役割の詳細な説明
  • Angular SMS テンプレート検証コード
  • Angularにng-zorroを導入する際の問題に関する簡単な分析
  • Angular+IonicはqueryParamsを使用してページジャンプ値の転送を実装します
  • Angularでシンプルなユニットテストを実装する例
  • AngularJs の $http は POST リクエストを送信しますが、PHP は Post データを受信できません。問題と解決策
  • 折りたたみと展開の効果を実現するための Angular+ionic のサンプルコード
  • Angular の 12 の典型的な問題について簡単に説明します

<<:  15 分で学べる並列アーティファクト GNU Parallel 入門ガイド

>>:  MySQL Community Server 5.7.16 のグリーン バージョンをインストールしてリモート ログインを実装する方法

推薦する

HTML4.0 要素のデフォルトスタイルの配置

コードをコピーコードは次のとおりです。 html、アドレス、引用ブロック、本文、dd、div、 dl...

Vueプラグインの実装で発生した問題の概要

目次シーン紹介プラグインの実装問題1: 重複したヘッダーコンポーネント質問2: 別の実装アイデア質問...

Vueはシンプルなコメント機能を実装します

この記事では、Vueの簡単なコメント機能を実装するための具体的なコードを参考までに共有します。具体的...

MySQL マスタースレーブレプリケーションの役割と動作原理の詳細な説明

1. マスタースレーブレプリケーションとは何ですか?マスタースレーブレプリケーションは、スレーブデー...

シンプルなログインページを実装するための HTML+jQuery

目次導入公開コード(バックエンドインターフェース)例 1: 最もシンプル (純粋な HTML)コード...

HTML テキストエスケープのヒント

今日、CSDN で HTML テキスト エスケープのちょっとしたトリックを見ましたが、とても簡単です...

CSS3 を使用して中心点の周りに要素を配置する方法の例

この記事では、CSS3 を使用して中心点を中心に要素をレイアウトする方法の例を紹介します。詳細は次の...

TypeScript 列挙型

目次1. 概要2. デジタル列挙2.1 逆マッピング3. 文字列の列挙4. const列挙5. まと...

960 グリッドシステムの基本原理と使用法

もちろん、CSS はフレームワークを必要とするほど高度ではないと考えて、反対の意見を持つ人もたくさん...

シンプルなスネークを実現するためのネイティブjsキャンバス

この記事では、参考までに、簡単なスネークゲームを実装するためのjsキャンバスの具体的なコードを共有し...

Vue3+TypeScriptはaxiosをカプセル化し、リクエスト呼び出しを実装します

まさか、2021年になってもTypeScriptについて聞いたことがない人がいるなんて?プロジェクト...

リアクトルーティングガード(ルーティングインターセプション)の実装

React は Vue とは異なります。ルートにメタ文字を設定することでルートインターセプションを実...

ウェブページを開いて数秒後に他のページにリダイレクトする

これを実現するには、次のコードを追加するだけです。方法1: メタを使用する使用方法: <Met...

JavaScript WebAPI、DOM、イベント、操作要素例の詳しい説明

目次ウェブAPI DOM DOMツリーDOM要素取得方法ドキュメントオブジェクトのプロパティイベント...

上位Nを見つけるためのMySQLグループソートの詳細な説明

MySQLグループソートで上位Nを見つけるテーブル構造grp でグループ化し、num で並べ替えて、...