Angular 动态控制 aside 标签显示和隐藏的一个例子

源代码：

<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的原创文章，尽在："汪子熙":