我的Angular視圖里有如下一組p節(jié)點(diǎn)，通過自定義指令控制：

<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值切換的時候，對應(yīng)的p節(jié)點(diǎn)區(qū)域會對應(yīng)地顯示和隱藏。p節(jié)點(diǎn)的隱藏，其實(shí)并不是通過css類實(shí)現(xiàn)，而是直接把DOM元素從HTML頁面中刪除來實(shí)現(xiàn)的。

具體實(shí)現(xiàn)是在Angular brower.js里實(shí)現(xiàn)的：

/*** @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里實(shí)施刪除操作：

最后調(diào)用的還是瀏覽器的原生實(shí)現(xiàn)removeChild來刪除DOM元素。

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

總結(jié)

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

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