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

Question

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

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

在构建应用程序之前，浏览器中的一切都很顺利。但是移动设备中的AoT编译器does not support“动态加载组件”，所以我们需要决定是否使用这种方式。那时我真的很困惑。我们可能会改变我们的结构，但我不知道哪种方式更好。

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

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

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

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

  • 不要使用指令/管道
  • 松散的交互性（除了能够使用简单的 HTML 标签，如 p、strong、em、table 等——如果我们将其视为交互式内容）
  • 稍微提高性能（我们使用 AoT 时？）

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

  • 能够使用指令/管道
  • 使用单独的 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 案例内部实际上是另一个骨架。我是 在这里使用 HTML 元素，但一般技术同样适用 用于其他用户定义的组件（作为骨骼类型）。