在ionic開發公用組件的時候，我一直在想有沒有angular有沒有像vue一樣的slot插槽。方便組件後期擴展。

然後去翻文檔，發現有ng-content這麽個東西，用法很像vue的slot。

組件預留插槽位置

<div class="header-wrapper">
  <div class="header">
    <span class="back" *ngIf="showBackButton"></span>
    <span class="title">{{title}}</span>
  </div>
  <ng-content></ng-content>
</div>

　使用的時候直接在標簽內添加你要的html代碼或者子組件

<custom-header [showBackButton]="false" title="Login">
  <logo-title text="Login with Palm ID"></logo-title>
</custom-header>

　logo-title子組件就會插入到ng-content的位置裏面　

這樣就可以很簡單的實現在一些公用組件擴展自己的html內容了。

[ionic3.x開發記錄]ng-content使用