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

在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內容了。