背景及吐槽：

今年有機會再次接觸angualr這個框架，想起第一次接觸ng還是16年讀書的時候，當時還是ng1，然后學起來特別辛苦，學習曲線特別陡峭；而今年有一個項目重構直接采用了angular6，而后面該項目后面由我負責開發和維護，然后我又重新再學習了ng6，本以為有ng1的基礎，學起來會好一些，然并卵，學習的曲線特別陡峭，但還是最后將ng6啃下來（很不情愿去學的，但沒辦法）?；貧w到項目，該項目沒有引入其他組件庫，所以很多基礎組件都是自己開發（用ng開發那種酸爽很帶勁），其中table組件讓我思考了差不多兩個星期，最后才開發出來，吐槽完畢，接下來就介紹一下我的做法，我的做法不一定最正確。

形式：

主要參考element里面的table組的格式：

vue:

<el-table :data="tableData">  <el-table-column prop="date" label="日期"></el-table-column>  <el-table-column label="操作">   <template slot-scope="scope">    <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>   </template>  </el-table-column> </el-table>

所以得到了angualr的table組件的格式：

<app-widget-table [data]="tableData">  <app-widget-table-column prop="date" label="日期"></app-widget-table-column>  <app-widget-table-column label="操作">   <ng-template #scope let-row="scope">      <ng-widget-button (click)="handleClick(row)" type="text" size="small">查看</el-button>   </ng-template>  </app-widget-table-column></app-widget-table>

在angular的table組件中，最為困難就是ng-template如何將作用域綁定到ng-widget-button組件中；

關鍵點知識講解：

ng-content：
可以將父組件中所包含的所有子組件，都插入table組件中ng-container所在的位置，跟vue中的slot很像；

ng-container:
可以作為一個組件的模板，跟vue里面的template組件很像；

ng-template：
該東西，是整個組件中最為麻煩的一個東西，直接使用它，會沒有任何效果，必須要和TemplateRef和ngTemplateOutlet一起使用，才有有效果，主要是作為模板并引入作用域，具體原理可以看一下官方文檔（https://www.angular.cn/api）

TemplateRef：
主要是用來獲取ng-template組件的引用；

ngTemplateOutlet：
將ng-template的內容在html頁面展示出來，并綁定變量，就像vue中的router-view；

QueryList：
獲取table組件中所有的內容指引；

ContentChildren：
內容映射的接口，針對多個子元素采用

ContentChild：
內容映射的接口，針對單個子元素采用

先對app-widget-table-column組件進行分析：