如何在 Angular Web 应用程序中动态加载 html 代码？

Question

我正在构建一个关于一本书的 Angular 网站。

在一个章节中，您可以选择一个章节并获取该章节的摘录（摘录为html格式）。

我想知道如何存储这些摘录。我认为为每一章创建一个组件是个坏主意。我考虑将 html 存储在字符串变量中，但我不能这样做，因为摘录的 html 代码包含很多引号 (")，这使得无法设置字符串变量。然后我考虑创建许多 html 文件并在同一个组件中加载正确的，但我不知道如何在组件中动态加载 html 文件。

如果您有任何合适的解决方案的想法，请告诉我！

Answer 1

为每一章创建 HTML 文件并在选择时加载它们确实是个坏主意。正如您所提到的，您不想创建组件，您可以尝试 Angular 的 ngTemplateOutlet。如果所有章节都有相同的通用显示模板，那么只需在您正在工作的组件中定义一个模板，并通过传递适当的章节详细信息来显示正确的模板，您的工作就差不多结束了。这是一个很好的read。

ng-template 的使用示例

<ng-template #sampleTemplate let-item>
      <p>I am chapter {{ item.name }}</p>
</ng-template>

下面是您的章节所在的位置，假设它是一个列表。您将它的对象（包含有关该章节的详细信息）传递给上面的模板。

<div *ngFor="let chapter of chapters">
      <ng-container [ngTemplateOutlet]="sampleTemplate" [ngTemplateOutletContext]="{ $implicit: chapter }">
        </ng-container>
 </div>

如果您希望一次显示第一章（比如点击时），您甚至不必转到模板概念，但只需将章节对象存储在变量中点击时会有所帮助。这是一个例子：

<div *ngFor="let chapter of chapters; let i=index">
      <button type="button" (click)="selectedChapter=chapter">Open Chapter{{i+1}}</button><br><br>
 </div>

<div>
  <p>I am {{ selectedChapter.name }}</p>
</div>

只需在打字稿文件中定义变量selectedChapter即可。

selectedChapter: any = this.chapters[0]; // chapters is the array of objects containing chapter details