この記事では主に角度動的フォームの実装アイデアを紹介します。具体的な実装の詳細については、コミュニティ内の semlinker によるフォームの動的作成に関する記事と、彼が推奨する参考リソースを参照してください: Configurable Reactive Forms in Angular with DynamicComponents この著者の記事は主に部分翻訳です。そして上記記事の反省。
動的フォームの使用シナリオ
このフォームは、ユーザーの選択やサーバーから返された情報に応じて再構成できます。たとえば、入力要素のセットの追加や削除などです。グループ選択要素など。
この場合、最初からすべてのフォームをテンプレートに記述し、選択制御にngifツリー構造を使用すると、プログラムはより冗長になります。
この頃。ユーザーの選択 (構成による) またはサーバーの応答に基づいて、プログラムが必要なフォームを自動的に生成することが最善です。これは動的フォームが扱うビジネスです。
コンポーネント生成の関連概念
コンポーネントの 2 つのコンポーネント
フォームを動的に生成するには、まずコンポーネントがどのように生成されるかを理解する必要があります。
angular コンポーネントは 2 つの部分で構成されます。
Wrapper
Wrapper は、初期化されると、コンポーネントをインスタンス化します。同時に、コンポーネントの変更検出と、ngOnInit や ngOnChanges などのフック関数のトリガーも行います。
View
View は、レンダリングされたテンプレートのレンダリングを担当し、コンポーネントの外観を表示し、Wrapper の変更検出をトリガーできます。コンポーネントは複数のビューを持つことができ、Angular が提供する 2 つの関数を呼び出すことで、各ビューを独自に生成および破棄できます。このプロセスにはトップレベル ビューの参加は必要ありません。
コンポーネントの通常の読み込み方法(非動的読み込み方法)
通常、コンポーネントをルートコンポーネントまたは別のコンポーネントに埋め込みます。埋め込まれたコンポーネントを子コンポーネント、埋め込まれたコンポーネントを親コンポーネントと呼びます。この時点で、サブコンポーネント コードがコンパイルされると、コンポーネント ファクトリ コンポーネント ファクトリ (Angular コア クラス ComponentFactory のインスタンス) と hsot ビュー が生成されます。ホスト ビューは配置を担当します。親コンポーネント内のこのコンポーネントの DOM ノード、およびコンポーネントを生成するラッパーとビュー。
コンポーネントの動的ロード
そして、動的コンポーネントをコンポーネントビューに挿入したい場合、動的コンポーネントのインスタンスを取得することはできません。これは、非動的コンポーネントコンパイラーが行うことであるためです。
動的コンポーネントの実装
angular は、上記の問題を解決するための関数をいくつか提供しています。これらの関数を使用するには、2 つのオブジェクトを挿入する必要があります。
constructor( private componentFactoryResolver: ComponentFactoryResolver, private viewcontainerRef: ViewContainerRef, ) { }
ComponentFactoryResolver と ViewContainerRef を注入しました。
ComponentFactoryResolver は、コンポーネント クラスをパラメータとして受け取り、コンポーネント クラスに基づいてコンポーネント ファクトリを生成するメソッド (resolveComponentFactory()) を提供します。これが、前述のコンポーネント ファクトリです。
ViewContainerRef は、コンポーネント ファクトリをパラメーターとして受け取り、このビューでサブコンポーネントを生成するメソッド (createComponent()) を提供します。 (私の個人的な理解では、ホストビューが行うことを処理し、コンポーネントのラッパーとビューを生成します)
動的フォームの実装
上記では、動的コンポーネントを実装するためのいくつかのテクノロジーを簡単に紹介しました。次に、それを行う方法について考えてみましょう。ダイナミックなフォルム。
具体的なアイデア
独立した動的フォームモジュールを作りたい 動的フォームを使いたい場合は、このモジュールを導入するだけで簡単に使用できます。
このモジュールが完了すると、トップレベルのユーザーの観点から見たワークフローは次のようになることを願っています:
問題の核心はこれにあります。コンポーネント。入力属性に基づいて必要なフォームを生成する方法。
言い換えれば、ComponentFactoryResolver と ViewContainerRef を呼び出してコンポーネントを動的に生成する必要があるのか、それとも他のものによって処理されるべきなのかということです。
次の図は実装のアイデアです:
実際、動的フォームを小さな動的コンポーネント(プリロードされていない)に分割し、外側のコンポーネントがコンテナとして機能します。内部で生成と破壊が行われ、ダイナミックなフォルムを形成します。
调用ComponentFactoryResolver和ViewContainerRef生成组件的的这部分逻辑没有集成在外层容器中,而是交给了一个自定义的指令和ng-container。因为指令没有视图,他通过注入ViewContainerRef获取到的是宿主的视图容器。由于ng-container不会被渲染,所以获取到的视图容器就是外层组件容器的视图容器。
这么处理的好处就是不需要由外层组件统一对各个拆分的动态组件进行管理,相当于是由动态组件自己进行管理。
外层组件容器大概会是下面这样:
configs是用户的配置数据,自定义指令寄宿在ng-container中,根据config渲染出各自的动态组件,而ng-container是透明的。
看一下代码目录结构,最后会是这个样子
以上就是大体的实现思路了,具体还有许多细节可以关注文章开头提到的那两篇文章,讲的很详细。
相关推荐:
jQuery实现动态表单验证时文本框抖动效果完整实例_jquery
以上がAngular ダイナミックフォーム例の説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

本篇文章继续Angular的学习,带大家了解一下Angular中的元数据和装饰器,简单了解一下他们的用法,希望对大家有所帮助!

本篇文章带大家深入了解一下angular的状态管理器NgRx,介绍一下NgRx的使用方法,希望对大家有所帮助!

angular中怎么使用monaco-editor?下面本篇文章记录下最近的一次业务中用到的 monaco-editor 在 angular 中的使用,希望对大家有所帮助!

Angular项目过大,怎么合理拆分它?下面本篇文章给大家介绍一下合理拆分Angular项目的方法,希望对大家有所帮助!

怎么自定义angular-datetime-picker格式?下面本篇文章聊聊自定义格式的方法,希望对大家有所帮助!

本篇文章给大家分享一个Angular实战,了解一下angualr 结合 ng-zorro 如何快速开发一个后台系统,希望对大家有所帮助!

Angular Route中怎么提前获取数据?下面本篇文章给大家介绍一下从 Angular Route 中提前获取数据的方法,希望对大家有所帮助!

本篇文章带大家了解一下Angular中的独立组件,看看怎么在Angular中创建一个独立组件,怎么在独立组件中导入已有的模块,希望对大家有所帮助!


ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

mPDF
mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。

SublimeText3 Linux 新バージョン
SublimeText3 Linux 最新バージョン

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

DVWA
Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、

PhpStorm Mac バージョン
最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール
