Angular组件销毁重初始化后computed属性未重新计算问题

1. 修复代码语法错误 #

你的computed函数里存在语法错误，赋值运算符=应改为比较运算符==（推荐用严格相等===更严谨）：

isDisabled = computed(() => {
  const username = this.username()
  const password = this.password()
  return username === '' || password === '' // 修正此处的=为===
})

该错误会导致逻辑判断异常，需优先修正。

2. 确认模板绑定的有效性 #

确保登录按钮的disabled属性正确绑定到isDisabled()信号：

<button type="submit" [disabled]="isDisabled()">登录</button>

若模板未引用isDisabled()，Angular的信号优化机制会判定该计算属性未被使用，停止追踪其依赖变化，在组件路由复用后更易触发此问题。

3. 解决路由复用导致的依赖追踪失效 #

若应用启用了路由复用策略（RouteReuseStrategy），组件实例会被缓存，导航返回时computed的依赖订阅可能未重新激活，可通过以下两种方式处理：

方式一：临时禁用当前组件的路由复用 #

在路由配置中为登录组件添加标记，禁止复用该组件：

// app-routing.module.ts
const routes: Routes = [
  // ...其他路由配置
  {
    path: 'login',
    component: LoginComponent,
    data: { reuse: false }
  }
];

若使用自定义RouteReuseStrategy，需在策略中判断该标记，不缓存登录组件：

export class CustomRouteReuseStrategy implements RouteReuseStrategy {
  shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
    // 拒绝复用标记了reuse: false的路由
    return future.routeConfig === curr.routeConfig && curr.data['reuse'] !== false;
  }

  // ...其他接口方法实现
}

方式二：手动重新触发依赖追踪 #

若需保留路由复用，可在组件的ngAfterViewInit钩子中手动调用一次isDisabled()，强制重建依赖订阅：

import { Component, AfterViewInit } from '@angular/core';
import { signal, computed } from '@angular/core';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html'
})
export class LoginComponent implements AfterViewInit {
  username = signal('');
  password = signal('');

  isDisabled = computed(() => {
    const username = this.username();
    const password = this.password();
    return username === '' || password === '';
  });

  ngAfterViewInit(): void {
    // 手动触发计算，重新绑定依赖关系
    this.isDisabled();
  }
}

4. 检查组件属性定义规范 #

确保username、password和isDisabled均为组件类的实例属性，不要在ngOnInit等生命周期钩子中重新创建信号或计算属性，否则会导致依赖关系断裂。

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