Angular 2 dynamische Vorlagen

Question

Ich entwickle etwas wie ein CMS. Ich habe Artikel, die Vorlagen haben. Artikel werden im Backend hinzugefügt und ich muss sie mithilfe von Vorlagen anzeigen (wenn ich den Artikel rende, weiß ich, welche Vorlage zu verwenden). Da es 10s Vorlagen gibt, versuche ich herauszufinden, wie man die Vorlagen am besten speichert und wie man die richtige Vorlage nach geladenen Artikeln lädt. Was Ich erwäge:

• Metadaten speichern über eine Vorlage auf Back-End und den Aufbau der Vorlage, wenn ich es
• müssen die Vorlagen in der Anwendung speichern (müssen die App bauen, wenn neue Vorlage erstellt wird)
• Speichern von roh-Vorlagen auf Backend
• eine Komponente für jede Vorlage zu haben und laden sie dynamisch (zu viel Overhead)

ich suche eine architektonische und te chnologische Lösung. Ich würde gerne mit Option 1 gehen, aber nicht wissen, wie man eine Vorlage für Artikel Komponente erstellen. Ich würde gerne nur eine Komponente haben, die den Artikel bekommt und nur die benötigte Vorlage lädt (baut).

Angular2 RC5

EDIT:

Vorlage A: A von CSS-Regeln (blauen Text, Kappen für Schlagzeilen) gesetzt, Überschrift, Absatz, Bild, Absatz und einen Link irgendwo anders (im Abschnitt) Vorlage B: Satz B von CSS-Regeln (roter Text, regelmäßige Schlagzeilen), Schlagzeile, Karussell für Bilder, ein Absatz

{ 
"templateId": 1, 
"title": "Article title", 
"elements": [{ 
    "text": "paragraph text" 
}, { 
    "image": "http: //someurl.com" 
}, { 
    "text": "another paragraph text" 
}] 

}

Answer 1

Ich denke, Ihre beste Wette ist, eine Komponente für jeden Stil zu haben, mit einer Elternkomponente, die einen ngSwitch verwendet, um zwischen den Artikeln zu wechseln. So ...

<article-component> 
    <div ngSwitch="article.type"> 
    <template-a *ngSwitchCase="a" [article]="article"> 
    </template-a> 
    <template-b *ngSwitchCase="b" [article]="article"> 
    </template-b> 
    <template-c *ngSwitchCase="c" [article]="article"> 
    </template-c> 
    </div> 
</article-component> 

Darüber hinaus bin ich nicht sicher, was Sie tun können, ohne zu wissen, was die „Artikel“ Datenmodell aussieht.

EDIT: Ok, nachdem Sie Ihr vorgeschlagenes Datenmodell gesehen haben, können Sie innerhalb Ihrer Vorlagen einen ngSwitch in einem ngFor ausführen, der über Ihr "elements" -Array iteriert. Ich weiß, das ist eine Art Janky, aber es ist wahrscheinlich deine beste Wette. Und dann teilte obv "paragraph", "image" und "carousel" -Komponenten, die zwischen den verschiedenen Artikelvorlagen verwendet werden sollten.