Dynamisch/statisch laden Komponenten/Seiten/HTML

Question

Ich möchte Sie zu unserer Situation über dynamische/statische Belastung Komponenten fragen.

Wir entwickeln eine "Multi Language Teaching App" für Android/iOS. Für den UI-Text verwenden wir ng2-translate plugin (JSON-Dateien für jede Sprache). Für den Unterrichtsinhalt verwenden wir separate HTML-Dateien für jede Sprache. Zu Beginn wählt der Benutzer eine Sprache aus, die er lernen möchte, und er sieht verwandte Lektionen als eine Liste (die ebenfalls aus einer JSON-Datei stammt). Wenn Sie auf eine Lektion klicken, wird die zugehörige HTML-Datei geladen und die darin enthaltenen Direktiven/Pipes dynamisch kompiliert (wodurch sie interaktiver wird). Mit Direktiven meine ich einfache Funktionen wie Toast anzeigen, wenn der Benutzer auf eine benutzerdefinierte Anweisung klickt: <example tooltip="explanation to show as a toast">An example sentence</example>. Aber vielleicht können wir in Zukunft komplexere Richtlinien verwenden.

Bis zum Erstellen der App läuft alles gut im Browser. Aber der AoT-Compiler does not support"dynamische Ladekomponenten" in mobilen Geräten, so müssen wir entscheiden, ob dieser Ansatz verwenden oder nicht. Und an diesem Punkt bin ich wirklich verwirrt. Wir können unsere Struktur ändern, aber ich weiß nicht, welcher Weg besser ist.

Soweit ich sehen kann, haben wir drei Optionen (wenn es mehr ist, mich bitte aufklären):

• Stop-HTML-Dateien verwenden und jeder von ihnen in eine Komponente mit HTML-Vorlagen zu konvertieren (mit AOT-Compiler (--prod-Modus)):

  • der Lage sein, Richtlinien/Leitungen zu verwenden
  • Verstärkung Interaktivität
  • Gain-Leistung (das ist die Haupt Zweck von AoT, richtig? aber was ist, wenn ich hunderte von html-seiten/komponenten verwende? ist es nicht eine sperrige Lösung?)
  • Verwenden Hunderte von vorkompilierte HTML-Seiten für Grammatiklektionen, Geschichten, Texte ...

• laden reine HTML-Dateien in eine innerHTML eines Laders Komponente (unter Verwendung von AOT-Compiler (--prod-Modus)):

  • verwenden Sie keine Richtlinien/Leitungen
  • lose Interaktivität (außer in der Lage, einfache HTML-ta zu verwenden gs wie p, strong, em, table usw. - wenn wir das als interaktiven Inhalt zählen)
  • Leistung ein bisschen steigern (wie wir AoT verwenden?)

• laden HTML-Dateien dynamisch als Komponenten über eine dynamische Vorlage Komponente (mit JIT-Compiler (--dev-Modus)):

  • Lage sein, Richtlinien verwenden/Leitungen
  • Verwenden Sie separate html Dateien
  • Verstärkung Interaktivität
  • Lose Leistung
  • etwas tun, das Eckige allgemein nicht

ich entscheiden kann, empfiehlt nicht, was jetzt zu tun ist, wenn ich mehr Interaktivität will, sollte ich die Leistung fallen, die Angular schlägt.

Ich wollte nur in der Lage sein, diese Grammatik-Unterricht in einer einfachen Syntax (wie HTML) als separate Dateien zu handhaben und nicht zu verwenden/deklarieren Komponenten für jeden von ihnen ...

Was würden Sie empfehlen?

Answer 1

Ich fragte gleiche Frage Ionic Forum und ich beschlossen, the solution of a user zu implementieren, die mir antwortete:

ich durch diese ging mit Markdown, versucht ein paar Dinge, und hier ist, was ich auf schließlich sesshaft:

• Speichern Sie Ihre Objekte jedoch ist bequem für Sie. In meinem Fall ist das die Markdown-Quelle.
• Definieren Sie zwei Komponenten; Wir nennen sie jetzt skeleton und bone.
• skeleton hat eine Eingabeeigenschaft, die die Quelle angibt. In ngOnChanges müssen Sie diese Quelle in ein Array von Elementen analysieren, die jeweils einem anderen Knochentyp entsprechen.
• skeleton ‚s Vorlage sieht ungefähr so ​​aus:

<template ngFor let-bone [ngForOf]="bones"> 
    <app-bone [bone]="bone"></app-bone> 
</template> 

• Stellen Sie sicher, jeder Knochen einen Diskriminator seiner Art angibt, hat, und dann die BoneComponent Vorlage ist ein großer Riese Schalter:

<blockquote *ngIf="bone.tag === 'blockquote'"> 
    <app-bone *ngFor="let child of bone.children" [bone]="child"></app-bone> 
</blockquote> 

<br *ngIf="bone.tag === 'br'"> 

... every other block-level element we support... 

Beachten Sie, dass dies rekursiv funktioniert, wenn Sie es benötigen, in dem die innerhalb der Blockquote Fall tatsächlich ein anderes Skelett ist. Ich bin mit HTML-Elementen hier, aber die allgemeine Technik funktioniert genauso gut für andere benutzerdefinierte Komponenten (als Arten von Knochen).