Angular/TypeScript刷新页面时isCalendarMode状态重置显示异常问题

刷新会触发Angular应用完整重启、组件重新实例化，此时isCalendarMode会先使用你硬编码的初始值false完成首次模板渲染。而写在ngOnInit里的路由事件订阅，要等NavigationEnd路由事件派发后才会执行赋值逻辑，两者之间的时间差就会导致本应隐藏的div先错误渲染，等回调执行后才更新为正确状态。

核心逻辑很简单：别把初始值写死成false，组件刚创建的时候就先读一次当前路由地址计算状态，就不会出现渲染错误的问题，两种实现方式选一种即可：

• 方式1：直接在字段声明时用当前路由地址计算初始值
  把原来的字段声明从isCalendarMode = false;改成：

  isCalendarMode = this.router.url.includes('calendar');
  

  原有的路由事件监听逻辑完全保留就行，后续非刷新场景的路由跳转，还是靠这个监听实时更新状态。
• 方式2：用RxJS的startWith操作符让订阅逻辑立刻执行一次
  字段可以直接声明为不设初始值的属性，修改ngOnInit里的订阅逻辑：

  isCalendarMode!: boolean;
  subs = new Subscription();
  
  ngOnInit() {
    this.subs.add(
      this.router.events.pipe(
        filter(e => e instanceof NavigationEnd),
        startWith(null) // 订阅生效后立刻触发一次回调，读取当前路由状态
      ).subscribe(_ => {
        this.isCalendarMode = this.router.url.includes('calendar');
      })
    );
  }
  

注意：记得实现OnDestroy生命周期，在组件销毁时调用this.subs.unsubscribe()取消订阅，避免内存泄漏。

两种方式都能保证组件首次渲染（包括刷新场景的重建）时，isCalendarMode拿到的就是和当前路由匹配的正确值，不会出现div错误显示的问题。

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