Angular view container删除view实例的过程

简介: Angular view container删除view实例的过程

单步调试进入this.viewContainer.createEmbeddedView(this.templateRef);

image.pngimage.pngimage.pngimage.pngimage.png从detachView的注释能发现,不仅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 flag

       viewToDetach[FLAGS] &= ~128 /* Attached */;

   }

   return viewToDetach;

}待删除视图在container里的索引,通过CONTAINER_HEADER_OFFSET加上方法输入的removeIndex计算而成。image.png待删除的视图实例:

image.png

相关文章
|
6月前
关于 Angular view Query 的 id 选择器问题的单步调试
关于 Angular view Query 的 id 选择器问题的单步调试
53 0
关于 Angular view Query 的 id 选择器问题的单步调试
关于 Angular view Query 的 id 选择器问题的单步调试
98 0
关于 Angular view Query 的 id 选择器问题的单步调试
|
缓存 JavaScript 前端开发
Angular 13 发布:全面弃用 View Engine
当地时间 11 月 4 日,Angular 团队宣布 Angular 13 发布。此版本核心更新包括不再支持旧编译和渲染引擎 View Engine,全面支持新编译和渲染引擎 lvy,以及不再支持 IE11,除此之外还有包括对 APF 以及 Angular CLI 等方面的更新和修改。
371 0
Angular 13 发布:全面弃用 View Engine
|
JavaScript
Angular 如何根据一个 class 的定义和数据,动态创建一个该类的实例
Angular 如何根据一个 class 的定义和数据,动态创建一个该类的实例
185 0
Angular 如何根据一个 class 的定义和数据,动态创建一个该类的实例
Angular 使用 Injector API 人工获取依赖注入的实例
Angular 使用 Injector API 人工获取依赖注入的实例
122 0
Angular 使用 Injector API 人工获取依赖注入的实例
每个施加在HTML元素上的Angular Directive,运行时都会生成一个新的实例
每个施加在HTML元素上的Angular Directive,运行时都会生成一个新的实例
78 0
每个施加在HTML元素上的Angular Directive,运行时都会生成一个新的实例
|
容器
Angular view container删除view实例的过程
Angular view container删除view实例的过程
Angular view container删除view实例的过程
Angular 依赖注入机制根据providers定义生成注入实例的框架代码
Angular 依赖注入机制根据providers定义生成注入实例的框架代码
Angular 依赖注入机制根据providers定义生成注入实例的框架代码
|
测试技术
Angular 依赖注入 useClass 的实例创建位置
Angular 依赖注入 useClass 的实例创建位置
Angular 依赖注入 useClass 的实例创建位置
Angular页面发生更新时,更新如何从view层传递到model层
Angular页面发生更新时,更新如何从view层传递到model层
Angular页面发生更新时,更新如何从view层传递到model层

热门文章

最新文章