时间戳

首页 > 解决方案 > 如何在 Angular 的组件模板中加载 HTML 文件？

angular - 如何在 Angular 的组件模板中加载 HTML 文件？

问题描述

我正在一个网站上展示我一直在做的一些附带项目。我创建了一个“项目”组件，它有一个标题、使用的技术列表和一个存储库的 url。我还希望能够添加一个基本 html 文件的路径，该文件只有一些解释项目的文本和标题。我不知道该怎么做……我需要为每个项目创建一个单独的组件吗？

该模板当前看起来像这样：

<a [href]="repositoryURL"><fa size="2x" name="github"></fa></a>
<h3 id="project-header">{{ title }}</h3>
<p>
  Technologies Used: {{ getTechnologiesList() }}
</p>
<div id="project-description">
  <!-- Here I want to include a description of the project with
     different paragraph and header elements, maybe some images  -->
</div>

编辑：

我的解决方案是将 HTML 文件存储在 src/assets 文件夹中，并使用 Http get 请求访问它们。然后，我将 HTML 存储为字符串，并[innerHTML]按照答案建议设置 div 元素的。

这是 Http 请求的样子：

descriptionPath : string = "multiquadris.htm";
projectDescription : string = "";

constructor(private http: HttpClient)
{
    this.http
        .get('assets/project-descriptions' + this.descriptionPath,
             { responseType: 'text' })
        .subscribe(data => {
            this.projectDescription = data;
        }
    );
}

和模板文件：

<a [href]="repositoryURL"><fa size="2x" name="github"></fa></a>
<h3 id="project-header">{{ title }}</h3>
<p>
  Technologies Used: {{ getTechnologiesList() }}
</p>
<div [innerHTML]="projectDescription"></div>

标签： angular

解决方案

你正在寻找的是 [innerHtml]。你需要这样的东西 

<a [href]="repositoryURL"><fa size="2x" name="github"></fa></a>
<h3 id="project-header">{{ title }}</h3>
<p>
  Technologies Used: {{ getTechnologiesList() }}
</p>
<div id="project-description">
 <div [innerHtml]="yourHTML">
</div>

推荐阅读