如何在 Angular 组件中显示 HTML Dom/Angular 组件？答案

【问题标题】：How to show a HTML Dom/ Angular Component inside a Angular component?如何在 Angular 组件中显示 HTML Dom/Angular 组件？
【发布时间】：2020-09-13 12:34:32
【问题描述】：

我有一个简单的component，名为rectangle，还有一个简单的css。现在我需要在该组件内显示一个元素示例 div 或另一个 component。我将如何实现这一目标？

我试过了：

<app-rectangle>
  <div>
   ...
 </div>
</app-rectangle>

没有任何输出显示。

【问题讨论】：

标签： angular

【解决方案1】：

您要实现的目标称为内容投影。

在<app-rectangle> 组件的模板中添加以下内容：

<ng-content></ng-content>

您的 div 应该会自动出现在这些标签中。

【讨论】：

【解决方案2】：

您可以使用<ng-content></ng-content> 实现此目的我相信您正在寻找here 提出的类似问题。

【讨论】：

【解决方案3】：

将<ng-content></ng-content>添加到组件模板中应该投射内容的地方，这里我在Stackblitz上为你创建了一个示例

hello.component.html

<h1>Hello from Component</h1>
<ng-content></ng-content>

app.component.html

<hello>
  <h1>Hello between component</h1>
</hello>

【讨论】：