[Angular] ViewChild及ContentChild介紹

發表於 2017-02-23 更新於 2024-12-15 分類於 Frontend ， Angular 文章字數： 400 所需閱讀時間 ≈ 1 分鐘

昨天參加線上angular讀書會(打個廣告)，分享的內容是ngContent
之前自己在寫的時候，套用bootstrap的功能時就有應用到
但那時候一直看不懂是什麼意思，在昨天就整個豁然開朗

那到底什麼是ViewChild、ContentChild，底下來看看範例吧

ViewChild

app-tab這個element就是ViewChild，也就是子Component的概念
這時候就會有人問，這樣做有什麼好處

可以直接引用子Component所有public事件、屬性
也就是說，可以不用辛苦的用Input、Output來進行傳遞(好壞先不討論囉!)

什麼是ngContent，可以說是叫做範本引入或是內容置換
也就是把那個位置的內容變成由外面傳進來，app.component.ts中app-tab的內容就是自定義

那基本上ng-content就是直接把外面傳的東西換掉放進去
進階一點的應用就是有多個ngContent，需要指定每個所放的位置
在ng-content中加上select並指定就可以取得父component所傳入的內容
這邊有三個類型

ContentChild有兩種取得的方式，在同一個parent中，是不能有重複的#id

記得要取得ContentChild必須要在AfterContentInit這個事件之後才能拿到物件
你才能夠爽爽的使用，不然會鼠翹翹喔!

差異非常的小，就是一個單數一個複數，收工@@