序文「大規模なフロントエンド プロジェクト向け」に設計されたフロントエンド フレームワークである 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属性: ホスト要素への参照を保持します 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 にバインドされた要素の後にビューを追加します。
ViewContainerRef を使用すると、createComponent() メソッドでコンポーネントをインスタンス化するときにホスト ビューを作成したり、createEmbeddedView() メソッドで TemplateRef をインスタンス化するときに埋め込みビューを作成したりできます。 ビュー コンテナーのインスタンスには、他のビュー コンテナーを含めて階層ビュー (ビュー ツリー) を作成することもできます。 階層を表示 Angular では、ビューは通常、ビュー階層に編成されます。ビュー ツリーは、全体として機能する関連ビューのツリーであり、Angular 変更検出の重要なコンポーネントの 1 つです。 ビュー ツリーのルート ビューは、コンポーネントのホスト ビューです。ホスト ビューは、ホスト コンポーネント上のビュー コンテナー (ViewContainerRef) に収集される埋め込みビュー ツリーのルートになることができます。ビュー ツリーは、ユーザーがアプリケーション内を移動すると (たとえば、ルーターを使用して) 動的にロードおよびアンロードできます。 ビュー ツリーとコンポーネント ツリーは 1 対 1 に対応していません。
コンポーネント、テンプレート、ビュー、モジュール Angular では、コンパニオン テンプレートを通じてコンポーネントのビューを定義します。テンプレートは、Angular にコンポーネントをレンダリングする方法を指示する HTML です。 ビューは通常、階層的に編成されており、UI パーティションまたはページの単位として変更、表示、または非表示にすることができます。コンポーネントに直接関連付けられたテンプレートは、そのコンポーネントのホスト ビューを定義します。コンポーネントは、他のコンポーネントのホストとして機能するいくつかの埋め込みビューを含むビュー階層を定義することもできます。 ビュー階層には、同じモジュール (NgModule) 内のコンポーネントのビューを含めることができ、他のモジュールで定義されたコンポーネントのビューを含めることもできます (多くの場合、そうします)。 要約するこの記事では、ElementRef、TemplateRef、ViewRef、ComponentRef、ViewContainerRef など、Angular の要素、ビュー、テンプレート、コンポーネントにおけるビュー関連の定義について簡単に説明します。 その中でも、ビューは Angular のアプリケーション UI の基本的な構成要素であり、一緒に作成および破棄される要素の最小のグループです。 ViewContainerRef は主に、埋め込みビューまたはコンポーネント ビューの作成と管理に使用されます。コンポーネントは、テンプレートを構成することによってビューを定義できます。コンポーネントに直接関連付けられたテンプレートは、コンポーネントのホスト ビューを定義します。コンポーネントには埋め込みビューを含めることもできます。 Angularフレームワークのビュー抽象定義の詳細説明に関するこの記事はこれで終わりです。より関連性の高いAngularビュー抽象定義コンテンツについては、123WORDPRESS.COMの以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも123WORDPRESS.COMをよろしくお願いいたします。 参照する
以下もご興味があるかもしれません:
|
<<: 15 分で学べる並列アーティファクト GNU Parallel 入門ガイド
>>: MySQL Community Server 5.7.16 のグリーン バージョンをインストールしてリモート ログインを実装する方法
最初にサーバー上に FTP サーバーをセットアップし始めたとき、接続できないことがわかったので、Fi...
コンテンツ1. 読者に留まる理由を与える。ウェブページを面白く魅力的なものにしましょう。しかし、まず...
以下のコードはすべて <head>...</head> の間にあり、具体的な...
最近、同社は CCFA 関連のいくつかの作業を行う予定で、その 1 つはカメラのリアルタイム監視を再...
Centos のサーバー側への適用がますます普及するにつれて、Centos7 もますます使用されるよ...
目次1. 問題の背景: 2. 問題の原因: 3. 問題解決:要約: 1. 問題の背景: window...
最近、お客様から支援の依頼を受けました。管理されている通信コンピュータ ルームから、サーバーの 1 ...
序文MySQL では、EXPLAIN コマンドを使用して、テーブルの接続方法や SELECT ステー...
フレームセットと本文は同じレベルにあるため、本文にフレームセットを配置することはできません。まずペー...
docker hub から es イメージ (バージョン 6.4.2) をダウンロードしました。詳細...
この記事の例では、タブ効果を実現するためのjsプラグインの具体的なコードを参考までに共有しています。...
多くの人が Linux Homebrew を使用しています。これをより良く使用するための 3 つのヒ...
Docker プライベートイメージライブラリDockerプライベートイメージライブラリとAlibab...
すりガラス効果がうまく表現されていれば、ページが非常に鮮やかで立体的に見えるようになります。写真に直...
今日、牛南ニュースリリースシステムについて学んでいたとき、牛南先生はスクロールバーに関するいくつかの...