單步調(diào)試進(jìn)入this.viewContainer.createEmbeddedView(this.templateRef);

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

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

應(yīng)用程序調(diào)用viewContainer的clear方法清除里面包含的視圖實(shí)例：

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

從detachView的注釋能發(fā)現(xiàn)，不僅view實(shí)例從view container中移除，并且對應(yīng)的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計(jì)算而成。

待刪除的視圖實(shí)例：

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

總結(jié)

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

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