在 Angular 组件中定位 innerHtml答案

【问题标题】：Position innerHtml in Angular component在 Angular 组件中定位 innerHtml
【发布时间】：2020-04-06 21:32:37
【问题描述】：

我有以下场景：

app.component.html

<app-card>
  This is the card body
</app-card>

card.component.html

<div class="card">
  <div class="card-header">
    Header
  </div>
  <div class="card-body">

  </div>
</div>

有没有一种简单的方法（比如插值）将文本This is the card body 渲染成<div class="card-body">？

【问题讨论】：

【解决方案1】：

使用ng-content:

<div class="card">
  <div class="card-header">
    Header
  </div>
  <div class="card-body">
    <ng-content></ng-content>
  </div>
</div>

【讨论】：

【解决方案2】：

在 app.component.html 文件中
试试下面的代码

<ng-content>
{{ write your property here }}
</ng-content>

【讨论】：