动态/静态加载组件/页面/ HTML

Question

我想就有关动态/静态加载组件的情况征求您的意见。

我们正在开发一个多语言教学应用程序＆＃34;适用于Android / iOS。对于UI文本，我们使用ng2-translate plugin（每种语言的JSON文件）。对于课程内容，我们为每种语言使用单独的HTML文件。在开始时，用户选择要学习的语言，然后将相关课程视为列表（也来自JSON文件）。单击课程将加载相关的HTML文件并动态编译其中的指令/管道（这使其更具交互性）。通过指令，我的意思是简单的函数，比如在用户单击自定义指令时显示toast，如：<example tooltip="explanation to show as a toast">An example sentence</example>。但也许我们将来可以使用更复杂的指令。

在构建应用程序时，浏览器中的一切顺利。但是移动设备中的AoT编译器does not support ＆＃34;动态加载程序组件＆＃34; ，因此我们需要决定是否使用此方法。在那一点上，我真的很困惑。我们可能会改变我们的结构，但我不知道哪种方式更好。

据我所知，我们有三种选择（如果有更多，请赐教）：

• 停止使用html文件并将每个文件转换为带有html模板的组件（使用AoT编译器（--prod模式））：

  • 能够使用指令/管道
  • 获得互动
  • 获得性能（这是AoT的主要目的，对吗？但如果我使用数百个html页面/组件会怎样？它不是一个庞大的解决方案吗？）
  • 使用数百个预编译的 html页面进行语法课程，故事，文字......

• 将纯HTML文件加载到加载程序组件的innerHTML中（使用AoT编译器（--prod模式））：

  • 不要使用指令/管道
  • 疏忽互动（除了能够使用简单的HTML标签，例如p，strong，em，table等 - 如果我们将其视为互动内容）
  • 获得一点性能（因为我们使用AoT？）

• 通过一个动态模板组件（使用JiT编译器（--dev模式））将HTML文件动态地作为组件加载：）

  • 能够使用指令/管道
  • 使用单独的html文件
  • 获得互动
  • 表现不佳
  • 执行Angular通常不推荐的内容

我无法决定现在该做什么，如果我想要更多的交互性，我应该放弃Angular提出的性能。

我只是希望能够以简单的语法（如HTML）处理这些语法课程作为单独的文件，而不是为每个语法使用/声明组件......

你会推荐什么？

Answer 1

我向Ionic论坛提出了同样的问题，我决定实施回复我的the solution of a user：

  

我用Markdown完成了这个，试了很多东西，这就是我最终解决的问题：

     

  
• 存放您的物品但对您来说很方便。就我而言，这是降价来源。
  
• 定义两个组件;我们暂时将其称为skeleton和bone。
  
• skeleton有一个输入属性，为其提供源代码。在ngOnChanges中，您需要将该源解析为一个元素数组，每个元素对应一个不同类型的骨骼。
  
• skeleton的模板看起来像这样：
  

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

  

  
• 确保每个骨骼都有一个指示其类型的鉴别器，然后BoneComponent模板是一个巨大的巨型开关：
  

<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...

  

请注意，如果需要，可以递归地执行此操作   在blockquote案例中，实际上是另一个骨架。我＆＃39;米   在这里使用HTML元素，但一般技术同样有效   用于其他用户定义的组件（作为骨骼类型）。