Angular：Observable过早完成致Async Pipe失效，求实现点击显Div2秒后隐藏

你的猜测完全正确——showDivObv$确实提前触发了complete，导致后续的showDiv$.next(true)无法被响应，具体原因如下：

• takeUntil(timer(1000))中的timer(1000)会在组件初始化后1秒自动发出第一个值，触发takeUntil立即终止整个Observable序列。
• 页面加载时showDiv$的初始值false会触发第一个tap输出here，但经过filter(Boolean)被过滤掉；1秒后takeUntil生效，showDivObv$进入complete状态，AsyncPipe会自动取消订阅。
• 之后你调用showDiv$.next(true)时，showDivObv$已经是已完成的Observable，不会再处理任何新值，自然不会触发第二个tap也不会显示Div。

要实现“点击按钮显示Div，2秒后自动隐藏”的需求，有两种简洁的实现方式：

方式一：直接在点击事件中控制状态 #

这种方式逻辑直观，适合简单场景：

showDiv$ = new BehaviorSubject<boolean>(false);

// 按钮点击绑定的方法
showDiv() {
  this.showDiv$.next(true);
  // 2秒后自动隐藏
  setTimeout(() => {
    this.showDiv$.next(false);
  }, 2000);
}

模板中直接订阅showDiv$：

<div *ngIf="showDiv$ | async" class="first-block-content">
  ....
</div>
<button (click)="showDiv()">显示Div</button>

方式二：用RxJS操作符实现响应式控制 #

如果想保持全RxJS的链式风格，可以用switchMap结合concat、timer来实现：

// 用于触发显示操作的Subject
showDivTrigger$ = new Subject<void>();
// 最终的显示状态Observable
showDiv$ = this.showDivTrigger$.pipe(
  // 每次触发时，先发出true（显示），2秒后发出false（隐藏）
  switchMap(() => concat(of(true), timer(2000).pipe(map(() => false)))),
  // 初始状态为隐藏
  startWith(false)
);

// 按钮点击绑定的方法
triggerShowDiv() {
  this.showDivTrigger$.next();
}

模板使用同样的结构：

<div *ngIf="showDiv$ | async" class="first-block-content">
  ....
</div>
<button (click)="triggerShowDiv()">显示Div</button>

这两种方式都能保证每次点击按钮后，Div会显示并在2秒后自动隐藏，同时避免了Observable提前完成的问题。

内容的提问来源于stack exchange，提问作者Brandon Graze