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存储为字符串，并将div元素的[innerHTML]设置为答案。

这是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>

Answer 2

您在组件中设置了模板吗？

const createSkillsQuery = (user, input) => User.find({
  $and: [
    { skills: { name: { $regex: input, $options: 'i' } } },
    { _workspace: user._workspace }
  ]
}).select('profile_pic full_name email created_date');

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

2 个答案: