Question

我在angular2中很新，我有一个问题。有没有办法在从外部文件导入的component.ts中添加更多内容？

我在多个页面中都有一个page-header.component，除了我改变了一些像这样的标题之外都是一样的。

<page-header [headerLinks]="['link1', 'link2', 'link3']"></page-header>

page-header.component.html如下所示：

<div class="page-header-links">
<a *ngFor="let headerLink of headerLinks" href="#">{{ headerLink }}</a>
</div>

我想在我的下一个文件中展开page-header-component，并且只在下一个文件中展开。像这样的东西：

<div class="page-header-links">
<a *ngFor="let headerLink of headerLinks" href="#">{{ headerLink }}</a>
</div>

add more content ---
<span class="rectangle-shape"></span>
<h3> title </h3>
<span class="rectangle-shape"></span>
and more

任何想法我该怎么做？

我试过这个，但也许我想念在ts文件中做某事？！

 <page-header [headerLinks]="['link1', 'link2', 'link3']">

 <span class="rectangle-shape"></span>
 <h3> title </h3>
 <span class="rectangle-shape"></span>

 </page-header>

Answer 1

你正在努力做到：

<page-header [headerLinks]="['link1', 'link2', 'link3']">
  <span class="rectangle-shape"></span>
  <h3> title </h3>
  <span class="rectangle-shape"></span>
</page-header>

您只需在page-header.component.html中添加<ng-content></ng-content>，如下所示：

<div class="page-header-links">
  <a *ngFor="let headerLink of headerLinks" href="#">{{ headerLink }}</a>
</div>
<ng-content></ng-content>

Answer 2

您可以使用

<div [innerHTML]="somePropertyWithHTML">

但是这只会添加纯HTML，并且不会为添加的HTML解析任何绑定或实例化Angular2组件或指令。

如果您需要，请参阅Maybe How to realize website with hundreds of pages in Angular2

Angular 2为导入的组件添加更多html代码

2 个答案: