Angular中Effect仅在页面重载后生效的原因求助

你提供的代码里存在变量名不匹配的核心错误，这直接导致了effect无法正常触发信号变更：

1. 服务中定义的信号是word = signal<string>('')，但setSearchTerm和getSearchTerm操作的却是未定义的searchTerm变量——调用setSearchTerm时根本没有更新实际的word信号。
2. 组件中调用this._sharedSignals.getWord()，但你的SharedSignals服务里根本没有getWord()方法，只有getSearchTerm()。初始化时effect读取的是无效值，自然无法追踪后续信号变化。

修正后的服务代码 #

@Injectable({
  providedIn: 'root'
})
export class SharedSignals {
    private word = signal<string>('');
    
    constructor() { }
    
    setWord(value: string) {
        this.word.set(value);
    }

    getWord() {
        return this.word();
    }
}

修正后的组件代码 #

export class ViewComponent {
    private _sharedSignals = inject(SharedSignals)
    
    constructor() {
        effect(() => {
          const word = this._sharedSignals.getWord();
          console.log("WORD: ", word);

          // more logic...
        });
    }
}

额外验证步骤 #

确保输入框的变更事件正确调用信号更新方法，比如在模板中绑定：

<input (input)="onInputChange($event)" />

组件补充对应方法：

onInputChange(event: Event) {
  const target = event.target as HTMLInputElement;
  this._sharedSignals.setWord(target.value);
}

Angular的effect会自动追踪内部读取的信号，只要信号被正确更新，effect就会重新执行。你提到的“页面重载后正常”大概率是偶然情况，或者实际运行代码与提供片段存在差异，但变量名不匹配是明确的错误根源。

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