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

Question

我正在创建一个网站来展示我一直在做的一些副业项目。我创建了一个“项目”组件，其中包含标题、所使用的技术列表和存储库的 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>

Answer 1

你正在寻找的是 [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>