小编Wal*_*ker的帖子

如何在 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>
Run Code Online (Sandbox Code Playgroud)

编辑:

我的解决方案是将 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, …
Run Code Online (Sandbox Code Playgroud)

angular

10
推荐指数
1
解决办法
1万
查看次数

标签 统计

angular ×1