Ich habe ein Array von Objekten. Jedes dieser Objekte hat eine Eigenschaft "component" mit einem String-Wert. Jetzt möchte ich die Liste durchlaufen und jede der referenzierten Komponenten rendern. Andere Eigenschaften der geloopten Objekte sollen Parameter für die Komponenten bereitstellen (nicht im Beispiel unten enthalten).
Meine bisherige Lösung funktioniert, erfordert aber die Angabe der erlaubten Elemente in einem Switch-Case und erzeugt unerwünschte Wrapper-Elemente:
Gibt es eine Möglichkeit, die Komponenten prozedural ohne den Round-trip von String-Vergleich und expliziten Aufruf zu integrieren?
So etwas vielleicht?:
%Vor%oder noch besser:
%Vor%oder alternativ:
%Vor%Vollständige Dokumentation und Download bei GitHub: Ссылка .
Basierend auf meiner Antwort habe ich das auf eine ziemlich saubere und vielseitigere Art und Weise umgesetzt. Demo: Ссылка
Verwendung (siehe GitHub für vollständige Dokumente):
%Vor%... wobei "name" ausdruck zu einem komponentennamen (string) auswerten muss, "args" (optional) muss zu einem objekt ausgewertet werden und "replace" (optional) muss zu einem boolean ausgewertet werden. Argumente werden in Attribute für die neue Komponente entpackt, sodass jeder Wert in diesem Objekt ein Ausdruck ist. Wenn "Ersetzen" wahr ist, ersetzt sich die Komponente selbst.
Es gibt keine ng-Komponente, die das nahtlos tun würde. Dies wird als eine Direktive enden, die ihren Inhalt neu kompiliert (von der Leistungseinbuße ganz zu schweigen). Sie können sich mit dem Ansatz vertraut machen, indem Sie etwas wie "dynamische Anweisung" suchen
estus
Danke, estus!
Ich habe genau das gemacht!
Die benutzerdefinierte Direktive component , die Sie unten sehen können, erstellt Komponenten basierend auf übergebenem name -Parameter und benötigt optional args .
Beispieleingabe:
%Vor%Ausgabe:
%Vor%Mit Argumenten:
%Vor%Ausgabe:
%Vor%
Ich konnte die zusätzlichen HTML-Elemente, die meine Komponenten umschlossen, nicht loswerden, aber zumindest muss ich der Schleife nicht explizit sagen, was erlaubt ist und was nicht.
Tags und Links javascript angularjs