html 选择器组件内的嵌套内容

Posted 2021-05-11

<!-- Parent component template -->
<app-server-element 
  *ngFor="let serverElement of serverElements" 
  [srvElement]="serverElement">
    <p>
      <strong *ngIf="serverElement.type === 'server'" style="color: red">{{ serverElement.content }}</strong>
      <em *ngIf="serverElement.type === 'blueprint'">{{ serverElement.content }}</em>
    </p>
</app-server-element>

<!-- By default it doesn't work. We have to notified to the component we want to pass nested content inside it. We do that using ng-content tag -->/

<!-- component template -->

<div
  class="panel panel-default">
  <div class="panel-heading">{{ element.name }}</div>
  <div class="panel-body">
    <ng-content></ng-content>
  </div>
</div>