單步調試進入this.viewContainer.createEmbeddedView(this.templateRef);

embeddedview創(chuàng)建成功之后，進入renderView：

單步調試，Chrome斷點停下來的地方，就是createEmbeddedView具體創(chuàng)建的視圖位置：

應用程序調用viewContainer的clear方法清除里面包含的視圖實例：

clear的實現(xiàn)邏輯是，在一個循環(huán)里刪除尾部的視圖實例直至container為空：

從detachView的注釋能發(fā)現(xiàn)，不僅view實例從view container中移除，并且對應的DOM元素也從HTML頁面中刪除了：

/*** Detaches a view from a container.** This method removes the view from the container's array of active views. It also* removes the view's elements from the DOM.** @param {?} lContainer The container from which to detach a view* @param {?} removeIndex The index of the view to detach* @return {?} Detached LView instance.*/ function detachView(lContainer, removeIndex) {if (lContainer.length <= CONTAINER_HEADER_OFFSET)return;/** @type {?} */const indexInContainer = CONTAINER_HEADER_OFFSET + removeIndex;/** @type {?} */const viewToDetach = lContainer[indexInContainer];if (viewToDetach) {/** @type {?} */const declarationLContainer = viewToDetach[DECLARATION_LCONTAINER];if (declarationLContainer !== null && declarationLContainer !== lContainer) {detachMovedView(declarationLContainer, viewToDetach);}if (removeIndex > 0) {lContainer[indexInContainer - 1][NEXT] = (/** @type {?} */ (viewToDetach[NEXT]));}/** @type {?} */const removedLView = removeFromArray(lContainer, CONTAINER_HEADER_OFFSET + removeIndex);addRemoveViewFromContainer(viewToDetach[TVIEW], viewToDetach, false, null);// notify query that a view has been removed/** @type {?} */const lQueries = removedLView[QUERIES];if (lQueries !== null) {lQueries.detachView(removedLView[TVIEW]);}viewToDetach[PARENT] = null;viewToDetach[NEXT] = null;// Unsets the attached flagviewToDetach[FLAGS] &= ~128 /* Attached */;}return viewToDetach; }

待刪除視圖在container里的索引，通過CONTAINER_HEADER_OFFSET加上方法輸入的removeIndex計算而成。

待刪除的視圖實例：

要獲取更多Jerry的原創(chuàng)文章，請關注公眾號"汪子熙":

總結

以上是生活随笔為你收集整理的Angular view container删除view实例的过程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。