Wie man dynamische Formen in Winkelform erstellt

Ich werde Ihnen anhand von Beispielcode ausführlich erklären, wie Sie eckige dynamische Formen erstellen können.

Quellcode: https://github.com/Karin001/ngx-dynamic-form

Dynamische Formularnutzungsszenarien

Manchmal Wir benötigen ein flexibles Formular, das basierend auf Benutzerauswahlen oder vom Server zurückgegebenen Informationen neu konfiguriert werden kann, z. B. das Hinzufügen oder Löschen einer Reihe von Eingabeelementen, einer Reihe von Auswahlelementen usw.

Wenn Sie in diesem Fall alle Formulare in der Vorlage von Anfang an schreiben und eine NGIF-Baumstruktur zur Auswahlsteuerung verwenden, wird das Programm redundanter.

Zu diesem Zeitpunkt. Am besten generiert das Programm automatisch die erforderlichen Formulare basierend auf der Auswahl des Benutzers (gesteuert durch die Konfiguration) oder der Antwort des Servers. Dies ist das Geschäft, mit dem sich dynamische Formulare befassen.

Verwandte Konzepte der Komponentengenerierung Zwei Komponenten von Komponenten

Um ein Formular dynamisch zu generieren, müssen Sie zunächst verstehen, wie Komponenten generiert werden.

Ein Winkelbauteil besteht aus zwei Teilen.

Wrapper

Wrapper kann mit Komponenten interagieren. Wenn ein Wrapper initialisiert wird, hat er eine Komponente für uns instanziiert. Gleichzeitig ist es auch für die Erkennung von Komponentenänderungen und das Auslösen von Hook-Funktionen wie ngOnInit und ngOnChanges verantwortlich.

Ansicht

Ansicht ist für das Rendern der gerenderten Vorlage verantwortlich, zeigt das Erscheinungsbild der Komponente an und kann die Änderungserkennung des Wrappers auslösen. Eine Komponente kann mehrere Ansichten haben, und jede Ansicht kann durch Aufrufen der beiden von Angular bereitgestellten Funktionen generiert und zerstört werden. Dieser Prozess erfordert nicht die Beteiligung der obersten Ebene.

Übliche Lademethode für Komponenten (nicht dynamische Lademethode)

Normalerweise betten wir die Komponente in die Stammkomponente oder eine andere Komponente ein. Die eingebettete Komponente wird als untergeordnete Komponente bezeichnet, und die eingebettete Komponente wird als übergeordnete Komponente bezeichnet. Zu diesem Zeitpunkt werden beim Kompilieren unseres Unterkomponentencodes eine Komponentenfabrik (eine Instanz der Angular-Kernklasse ComponentFactory) und eine hsot-Ansicht generiert. Die Host-Ansicht ist dafür verantwortlich, dass diese Komponente die Komponente im übergeordneten Element generiert Komponentenansicht Der DOM-Knoten der Komponente sowie der Wrapper und die Ansicht, die die Komponente generieren.

Dynamisches Laden von Komponenten

Wenn wir eine dynamische Komponente in eine Komponentenansicht einfügen möchten, können wir keine Instanz der dynamischen Komponente erhalten, da diese nicht dynamisch sind Was der Komponenten-Compiler tut.

Implementierung dynamischer Komponenten

Angular bietet einige Funktionen zur Lösung der oben genannten Probleme. Um diese Funktionen nutzen zu können, müssen wir zwei Objekte einfügen.

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

Wir haben ComponentFactoryResolver und ViewContainerRef eingefügt.

ComponentFactoryResolver stellt eine Methode (resolveComponentFactory()) bereit, die eine Komponentenklasse als Parameter empfängt und eine Komponentenfabrik basierend auf der Komponentenklasse generiert, bei der es sich um die zuvor erwähnte Komponentenfabrik handelt.

ViewContainerRef stellt eine Methode (createComponent()) bereit, die eine Komponentenfabrik als Parameter empfängt, um Unterkomponenten in der Ansicht zu generieren. (Mein persönliches Verständnis ist, dass es die Aufgaben der Host-Ansicht verarbeitet und Wrapper und Ansichten für die Komponenten generiert.)

Dynamische Formulare implementieren

Das Obige stellt kurz einige Möglichkeiten zur Implementierung dynamischer Komponenten vor. Technologie, jetzt Beginnen Sie darüber nachzudenken, wie Sie eine dynamische Form erstellen können.

Spezifische Ideen

Wir möchten ein unabhängiges dynamisches Formularmodul erstellen. Wenn wir dynamische Formulare verwenden möchten, müssen wir dieses Modul nur einführen und mit einer kleinen Konfiguration verwenden.

Wir hoffen, dass nach Abschluss dieses Moduls der Workflow aus Sicht der Top-Level-Benutzer wie folgt aussehen wird:

Wir können es problemlos schaffen Eine Komponente mit Eingabeeigenschaften. Der Kern des Problems besteht darin, wie diese Komponente basierend auf den Eingabeeigenschaften das gewünschte Formular generiert.

Mit anderen Worten, sollte es ComponentFactoryResolver und ViewContainerRef aufrufen, um Komponenten dynamisch zu generieren, oder sollte es von anderen verarbeitet werden.

Das folgende Bild ist die Implementierungsidee:

Tatsächlich haben wir die dynamische Form in kleine dynamische Komponenten (nicht vorinstalliert) aufgeteilt Die Komponente fungiert als Container und alle dynamischen Komponenten werden im Inneren generiert und zerstört. Zusammen bilden sie eine dynamische Form. Die Logik zum Aufrufen von ComponentFactoryResolver und ViewContainerRef zum Generieren von Komponenten ist nicht in den äußeren Container integriert, sondern wird an eine benutzerdefinierte Direktive und einen NG-Container übergeben. Da die Anweisung keine Ansicht hat, erhält sie durch die Injektion von ViewContainerRef den Ansichtscontainer des Hosts. Da der NG-Container nicht gerendert wird, ist der erhaltene Ansichtscontainer der Ansichtscontainer des äußeren Komponentencontainers.

Der Vorteil dieses Ansatzes besteht darin, dass die äußere Komponente nicht jede geteilte dynamische Komponente einheitlich verwalten muss, was einer Verwaltung durch die dynamische Komponente selbst gleichkommt.

Der äußere Komponentenbehälter wird wahrscheinlich so aussehen:

<form>
 <ng-container *ngFor="let config of configs" [自定义指令] >
 </ng-container>
</form>

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

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

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

在ES6中子组件调用父组件使用方法

在Vue-cli中使用Eslint如何实现自动格式化

在Vue中如何创建组件

Das obige ist der detaillierte Inhalt vonWie man dynamische Formen in Winkelform erstellt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!