Angular信号替换原始变量后无法正确加载存储值问题

你遇到的核心问题是普通类变量不具备响应式能力，再加上Angular生命周期的执行顺序，导致直接赋值无法触发视图更新：

1. 构造函数执行时，组件视图还未完成初始化，双向绑定[(activeId)]已经读取了activeId的默认值'role-policy'；
2. 直接给普通变量赋值不会触发Angular变更检测，所以视图不会更新到服务中存储的Signal值；
3. setTimeout之所以有效，是因为它把赋值逻辑推迟到Angular初始变更检测完成后执行，此时赋值会触发后续的变更检测刷新视图。

推荐直接利用Angular Signal的响应式特性，让组件和服务的状态联动，彻底摆脱手动赋值和setTimeout的依赖：

方案1：组件直接绑定服务的Signal（最简洁） #

去掉组件自己的activeId变量，模板直接与服务的Signal交互，同时处理双向绑定的更新：

组件代码 #

constructor(public tabService: TabService) {}

// 不需要额外的ngOnDestroy逻辑，因为切换标签时会实时同步到服务

模板代码 #

<uxa-tab-group 
  variant="primary" 
  size="medium" 
  [activeId]="tabService.activeId()" 
  (activeIdChange)="tabService.activeId.set($event)"
>

这样初始化时会直接读取服务Signal的当前值，切换标签时实时更新服务的Signal状态，用户返回页面时自然加载最后打开的标签页。

方案2：组件用Signal与服务联动（保留组件本地状态） #

如果需要组件本地维护activeId，可以将组件的activeId也定义为Signal，并通过effect同步服务的状态：

组件代码 #

import { effect, signal } from '@angular/core';

// 初始化时直接取服务的Signal值
activeId = signal(this.tabService.activeId());

constructor(public tabService: TabService) {
  // 监听服务Signal的变化，自动同步到组件的Signal
  effect(() => {
    this.activeId.set(this.tabService.activeId());
  });
}

ngOnDestroy() {
  // 组件销毁时同步本地状态到服务
  this.tabService.activeId.set(this.activeId());
}

模板代码 #

<uxa-tab-group 
  variant="primary" 
  size="medium" 
  [(activeId)]="activeId()"
>

方案3：用生命周期钩子替代setTimeout（仅作兼容） #

如果暂时不想改动响应式结构，可以把赋值逻辑放到ngOnInit（组件初始化完成后执行），而不是构造函数：

activeId: string = 'role-policy';

constructor(public tabService: TabService) {}

ngOnInit() {
  // 此时组件初始化完成，赋值会触发变更检测
  this.activeId = this.tabService.activeId();
}

Angular的Signal本身是响应式的，但你之前把Signal的值赋值给了普通类变量，丢失了响应式关联。只有当组件的状态是响应式类型（Signal、Observable等）时，变更才会自动触发变更检测更新视图。

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