Angular 6-如何创建一个组件并在其中嵌套多个div

Question

我正在尝试创建一个可以重用的搜索下拉组件。当我从数据库中提取数据时，我可以在下拉菜单中显示它，如果我需要添加一个按钮，将其显示在文本区域，或者根据我的需要将其添加到列表中。我见过一些例子，比如清晰度设计模式，但我似乎不明白他们是怎么做到的

<search-component>
<div *ngFor="let info of infos">
{{info}}
</div>
<div>[display selected item here]</div>
</search-component>

我以前做过一个，但搜索与该组件耦合，我必须创建许多具有不同方式的组件来显示数据。

提前感谢

Answer 1

用<ng-container>:包裹

<search-component>
<ng-container>
<div *ngFor="let info of infos">
{{info}}
</div>
<div>[display selected item here]</div>
</ng-container>
</search-component>

Answer 2

我发现了

在搜索组件html中，我添加

<ng-content select=".content"></ng-content>

然后当我使用搜索组件时

我做

<search-component> 
<div class="content">
<div *ngFor="let info of infos">
{{info}}
</div>
<div>[display selected item here]</div>
</div>
</search-component>

它的工作原理是