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 種類のビューをサポートしています。

（１）テンプレート（template）にリンクされた埋め込みビュー（embeddedView）。

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

（２）コンポーネントのホストビュー（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をよろしくお願いいたします。

参照する