検索
ホームページウェブフロントエンドjsチュートリアルAngular ダイナミックフォーム例の説明
Angular ダイナミックフォーム例の説明Feb 23, 2018 am 10:07 AM
angular説明する

この記事では主に角度動的フォームの実装アイデアを紹介します。具体的な実装の詳細については、コミュニティ内の semlinker によるフォームの動的作成に関する記事と、彼が推奨する参考リソースを参照してください: Configurable Reactive Forms in Angular with DynamicComponents この著者の記事は主に部分翻訳です。そして上記記事の反省。

Angular ダイナミックフォーム例の説明

動的フォームの使用シナリオ

このフォームは、ユーザーの選択やサーバーから返された情報に応じて再構成できます。たとえば、入力要素のセットの追加や削除などです。グループ選択要素など。

この場合、最初からすべてのフォームをテンプレートに記述し、選択制御にngifツリー構造を使用すると、プログラムはより冗長になります。

この頃。ユーザーの選択 (構成による) またはサーバーの応答に基づいて、プログラムが必要なフォームを自動的に生成することが最善です。これは動的フォームが扱うビジネスです。


コンポーネント生成の関連概念

  • コンポーネントの 2 つのコンポーネント

フォームを動的に生成するには、まずコンポーネントがどのように生成されるかを理解する必要があります。

angular コンポーネントは 2 つの部分で構成されます。

  1. Wrapper

Wrapper は、初期化されると、コンポーネントをインスタンス化します。同時に、コンポーネントの変更検出と、ngOnInit や ngOnChanges などのフック関数のトリガーも行います。

  1. View

View は、レンダリングされたテンプレートのレンダリングを担当し、コンポーネントの外観を表示し、Wrapper の変更検出をトリガーできます。コンポーネントは複数のビューを持つことができ、Angular が提供する 2 つの関数を呼び出すことで、各ビューを独自に生成および破棄できます。このプロセスにはトップレベル ビューの参加は必要ありません。

  • コンポーネントの通常の読み込み方法(非動的読み込み方法)

通常、コンポーネントをルートコンポーネントまたは別のコンポーネントに埋め込みます。埋め込まれたコンポーネントを子コンポーネント、埋め込まれたコンポーネントを親コンポーネントと呼びます。この時点で、サブコンポーネント コードがコンパイルされると、コンポーネント ファクトリ コンポーネント ファクトリ (Angular コア クラス ComponentFactory のインスタンス) と hsot ビュー が生成されます。ホスト ビューは配置を担当します。親コンポーネント内のこのコンポーネントの DOM ノード、およびコンポーネントを生成するラッパーとビュー。

  • コンポーネントの動的ロード

そして、動的コンポーネントをコンポーネントビューに挿入したい場合、動的コンポーネントのインスタンスを取得することはできません。これは、非動的コンポーネントコンパイラーが行うことであるためです。


動的コンポーネントの実装

angular は、上記の問題を解決するための関数をいくつか提供しています。これらの関数を使用するには、2 つのオブジェクトを挿入する必要があります。

constructor(
    private componentFactoryResolver: ComponentFactoryResolver,
    private viewcontainerRef: ViewContainerRef,
  ) {
      
  }

ComponentFactoryResolver と ViewContainerRef を注入しました。

ComponentFactoryResolver は、コンポーネント クラスをパラメータとして受け取り、コンポーネント クラスに基づいてコンポーネント ファクトリを生成するメソッド (resolveComponentFactory()) を提供します。これが、前述のコンポーネント ファクトリです。

ViewContainerRef は、コンポーネント ファクトリをパラメーターとして受け取り、このビューでサブコンポーネントを生成するメソッド (createComponent()) を提供します。 (私の個人的な理解では、ホストビューが行うことを処理し、コンポーネントのラッパーとビューを生成します)


動的フォームの実装

上記では、動的コンポーネントを実装するためのいくつかのテクノロジーを簡単に紹介しました。次に、それを行う方法について考えてみましょう。ダイナミックなフォルム。

  • 具体的なアイデア

独立した動的フォームモジュールを作りたい 動的フォームを使いたい場合は、このモジュールを導入するだけで簡単に使用できます。

このモジュールが完了すると、トップレベルのユーザーの観点から見たワークフローは次のようになることを願っています:
Angular ダイナミックフォーム例の説明

問題の核心はこれにあります。コンポーネント。入力属性に基づいて必要なフォームを生成する方法。

言い換えれば、ComponentFactoryResolver と ViewContainerRef を呼び出してコンポーネントを動的に生成する必要があるのか​​、それとも他のものによって処理されるべきなのかということです。

次の図は実装のアイデアです:

Angular ダイナミックフォーム例の説明

  1. 実際、動的フォームを小さな動的コンポーネント(プリロードされていない)に分割し、外側のコンポーネントがコンテナとして機能します。内部で生成と破壊が行われ、ダイナミックなフォルムを形成します。

  2. 调用ComponentFactoryResolver和ViewContainerRef生成组件的的这部分逻辑没有集成在外层容器中,而是交给了一个自定义的指令和ng-container。因为指令没有视图,他通过注入ViewContainerRef获取到的是宿主的视图容器。由于ng-container不会被渲染,所以获取到的视图容器就是外层组件容器的视图容器。

这么处理的好处就是不需要由外层组件统一对各个拆分的动态组件进行管理,相当于是由动态组件自己进行管理。

外层组件容器大概会是下面这样:


    
configs是用户的配置数据,自定义指令寄宿在ng-container中,根据config渲染出各自的动态组件,而ng-container是透明的。

看一下代码目录结构,最后会是这个样子

Angular ダイナミックフォーム例の説明

以上就是大体的实现思路了,具体还有许多细节可以关注文章开头提到的那两篇文章,讲的很详细。

相关推荐:

php 动态表单的生成和提交解决方案

动态表单(一)动态表单的定义

jQuery实现动态表单验证时文本框抖动效果完整实例_jquery

以上がAngular ダイナミックフォーム例の説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
聊聊Angular中的元数据(Metadata)和装饰器(Decorator)聊聊Angular中的元数据(Metadata)和装饰器(Decorator)Feb 28, 2022 am 11:10 AM

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

angular学习之详解状态管理器NgRxangular学习之详解状态管理器NgRxMay 25, 2022 am 11:01 AM

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

浅析angular中怎么使用monaco-editor浅析angular中怎么使用monaco-editorOct 17, 2022 pm 08:04 PM

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

项目过大怎么办?如何合理拆分Angular项目?项目过大怎么办?如何合理拆分Angular项目?Jul 26, 2022 pm 07:18 PM

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

聊聊自定义angular-datetime-picker格式的方法聊聊自定义angular-datetime-picker格式的方法Sep 08, 2022 pm 08:29 PM

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

Angular + NG-ZORRO快速开发一个后台系统Angular + NG-ZORRO快速开发一个后台系统Apr 21, 2022 am 10:45 AM

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

聊聊Angular Route中怎么提前获取数据聊聊Angular Route中怎么提前获取数据Jul 13, 2022 pm 08:00 PM

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

浅析Angular中的独立组件,看看怎么使用浅析Angular中的独立组件,看看怎么使用Jun 23, 2022 pm 03:49 PM

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

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

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

ホットツール

mPDF

mPDF

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

SublimeText3 Linux 新バージョン

SublimeText3 Linux 新バージョン

SublimeText3 Linux 最新バージョン

SublimeText3 Mac版

SublimeText3 Mac版

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

DVWA

DVWA

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

PhpStorm Mac バージョン

PhpStorm Mac バージョン

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