Angular模板中内部async管道不生效问题求助

嘿，我一眼就看出问题所在啦！你遇到的这个“点击一次按钮div显示但文本要两次才出来”的情况，根源在于模板里重复使用了async管道订阅同一个Observable。

问题原因拆解 #

当你在模板里写了两次message$ | async：一次在*ngIf里，一次在插值表达式{{ }}里，每个async管道都会对message$发起一个独立的订阅。

• 第一次点击“Queue Notification”时，*ngIf里的订阅先触发，接收到通知值后让div显示出来；但这时候插值表达式里的订阅才刚创建，错过了这次值的发射，所以文本是空的。
• 第二次点击时，两个订阅都已经存在，都能接收到新发射的通知值，所以文本就正常显示了。

快速解决方案：用*ngIf的as语法复用订阅结果 #

这是Angular里处理这类场景的最佳实践，只需要一次async订阅，把结果存为局部变量，然后在div里复用这个变量：

<div *ngIf="message$ | async as message" class="notification">
  {{ message }}
</div>

这样不管是判断div是否显示，还是渲染文本，用的都是同一个订阅接收到的值，从根源上避免了重复订阅的问题，点击一次按钮就能正常显示通知内容啦。

额外补充：为什么不用手动订阅？ #

当然你也可以在组件类里手动订阅message$，把值存在一个组件变量（比如currentMessage）里，然后模板里用*ngIf="currentMessage"和{{ currentMessage }}。但这种方法需要你手动管理订阅的销毁（比如在ngOnDestroy里调用subscription.unsubscribe()），容易遗漏导致内存泄漏，远不如async管道+as语法省心。

内容的提问来源于stack exchange，提问作者Kyle V.