源代碼：

<aside *ngIf="isBannerVisible$ | async">Sorry, we will not continue to support Internet Explorer 11.<br />Please upgrade to Microsoft Edge.<br /><button (click)="onDismiss()">Dismiss</button> </aside>

HTML aside 元素表示一個和其余頁面內容幾乎無關的部分，被認為是獨立于該內容的一部分并且可以被單獨的拆分出來而不會使整體受影響。 其通常表現為側邊欄或者標注框（call-out boxes）。

這里 isBannerVisible 是一個值類型為 boolean 的 Observable 對象，其數據源為另外兩個 Observable 對象，在 map 函數里，對這兩個 Observable 對象的值進行邏輯運算。

當我點了 dismiss 按鈕之后：

從調用棧觀察到，這個操作會觸發 Angular 框架( zone-evergreen.js, core.js 里的 detectChanges，animations.js)，最終調用 browser.js 將 aside 元素 從 DOM 樹中移除。

dismiss 按鈕點擊后，會觸發 onDismiss 方法，isDismissed Observable 對象會發射一個 true 值：

從這個調用棧看得很清楚：isDismissed Observable 發射 true 之后，isBannerVisible Observable 對象的 combineLatest.js operator 和 map operator 的函數體會依次執行，我們可以想象成被發生的 true 值，依次流過了 isBannerVisible 通過 pipe 操作定義的兩根管道里。

注意，下圖第 18 行執行到 map 操作的時候，返回的是一個 FunctionOperator，而并不會執行 map 操作里的箭頭函數主題。這個箭頭函數主體，只有當 isBannerVisible$ 依賴的另兩個 Observable 發射了新的值之后，才會被觸發。

更多Jerry的原創文章，盡在：“汪子熙”:

總結

以上是生活随笔為你收集整理的Angular 动态控制 aside 标签显示和隐藏的一个例子的全部內容，希望文章能夠幫你解決所遇到的問題。

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