我的Angular視圖里有如下一組p節點，通過自定義指令控制：

<p>The condition is currently<span [ngClass]="{ 'a': !condition, 'b': condition, 'unless': true, 'fuck_false': false, 'fuck_true': true }">{{condition}}</span>.<button(click)="condition = !condition"[ngClass] = "{ 'a': condition, 'b': !condition }" >Toggle condition to {{condition ? 'false' : 'true'}}</button> </p> <p *appUnless="condition" class="unless a">(A) This paragraph is displayed because the condition is false. </p><p *appUnless="!condition" class="unless b">(B) Although the condition is true,this paragraph is displayed because appUnless is set to false. </p>

condition值切換的時候，對應的p節點區域會對應地顯示和隱藏。p節點的隱藏，其實并不是通過css類實現，而是直接把DOM元素從HTML頁面中刪除來實現的。

具體實現是在Angular brower.js里實現的：

/*** @fileoverview added by tsickle* Generated from: packages/animations/browser/src/render/animation_engine_next.ts* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc*/ class AnimationEngine {/*** @param {?} bodyNode* @param {?} _driver* @param {?} normalizer*/constructor(bodyNode, _driver, normalizer) {this.bodyNode = bodyNode;this._driver = _driver;this._triggerCache = {};// this method is designed to be overridden by the code that uses this enginethis.onRemovalComplete = (/*** @param {?} element* @param {?} context* @return {?}*/(element, context) => { });this._transitionEngine = new TransitionAnimationEngine(bodyNode, _driver, normalizer);this._timelineEngine = new TimelineAnimationEngine(bodyNode, _driver, normalizer);this._transitionEngine.onRemovalComplete = (/*** @param {?} element* @param {?} context* @return {?}*/(element, context) => this.onRemovalComplete(element, context));}

在AnimationEngine里實施刪除操作：

最后調用的還是瀏覽器的原生實現removeChild來刪除DOM元素。

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

總結

以上是生活随笔為你收集整理的Angular 页面元素的DOM级别的删除过程的全部內容，希望文章能夠幫你解決所遇到的問題。

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