Angular 動態產生Component
2018/09/03
Sep 6, 2018 · 1 min read
最近在公司遇到大量財務報表的需求,每個報表都會需要一個Filter來過濾塞選條件,所以理論上共用同一個元件避免每個報表都需要重新刻一個Filter元件,但每個報表都有不同的欄位及過濾條件,連排列位子都不相同,那該如何共用呢?
先建立Filter Module,習慣是在 /shared/filter 下建立
ng g m Filter接下來建立Filter元件 /shared/filter/filter 下建立
ng g c Filterfilter的base model
這個filter會搭配Angular Reactive Forms 所以加入 “validation”變數,其他稍後會一併說明。
如果我有Input的欄位就可以去繼承FilterBase並擴充他。
Filter Service 一個簡單的Serivce,功能是將Filter轉換成FormGroup
Filter Component 是Form主要的載體
Filter元件準備好之後,可以開始使用他,以Member List來舉例。