Angular 動態產生Component

2018/09/03

Ryan Tsai
Ryan Tsai
Sep 6, 2018 · 1 min read

最近在公司遇到大量財務報表的需求,每個報表都會需要一個Filter來過濾塞選條件,所以理論上共用同一個元件避免每個報表都需要重新刻一個Filter元件,但每個報表都有不同的欄位及過濾條件,連排列位子都不相同,那該如何共用呢?

先建立Filter Module,習慣是在 /shared/filter 下建立

ng g m Filter

接下來建立Filter元件 /shared/filter/filter 下建立

ng g c Filter

filter的base model

這個filter會搭配Angular Reactive Forms 所以加入 “validation”變數,其他稍後會一併說明。

如果我有Input的欄位就可以去繼承FilterBase並擴充他。

Filter Service 一個簡單的Serivce,功能是將Filter轉換成FormGroup

Filter Component 是Form主要的載體

Filter元件準備好之後,可以開始使用他,以Member List來舉例。

    Ryan Tsai

    Written by

    Ryan Tsai

    Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
    Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
    Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade