5min-Angular-03-Angular DOM Manipulation

05-25

來自專欄 5分鐘Angular

前言

原想轉載並翻譯Medium：Exploring Angular DOM manipulation techniques using ViewContainerRef。但看到知乎上已有捷足先登：使用 ViewContainerRef 探索Angular DOM操作。在此就復用吧，這是一篇非常好的關於Angular如何動態操作DOM的入門文章，補充了Angular官方文檔中這方面的內容，並很好的闡述了ElementRef、TemplateRef、ViewRef、ViewContainerRef以及ComponentRef，值得一讀。

本文試圖用兩張圖來概括和理清上述文章中所涉及各概念的關係。

圖1 UML

圖2 三種操作方法

補充一點：ViewChild無法得到ComponentRef，請參考：ViewChild does not return a ComponentRef。

知者拿去主義，不知者閱讀原文。