独立组件中使用selectSignal报错：缺少signal提供者

我在独立组件中尝试使用selectSignal时触发了运行时错误：

ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(Standalone[AllTablesHeadComponent])[signal -> signal -> signal -> signal]:
NullInjectorError: No provider for signal!

我是否缺少该功能对应的提供者？

环境信息 #

Angular CLI: 16.1.8
Node: 18.15.0
Package Manager: npm 9.5.0
OS: win32 x64

Angular: 16.1.8
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1502.8
@angular-devkit/build-angular   16.1.8
@angular-devkit/core            16.1.8
@angular-devkit/schematics      16.1.8
@angular/cdk                    16.1.7
@angular/material               16.1.7
@schematics/angular             16.1.8
rxjs                            7.8.1
typescript                      5.1.6
zone.js                         0.13.1

故障组件代码 #

import { CommonModule } from '@angular/common';
import { Component, OnInit, inject, signal } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { Store } from '@ngrx/store';
import { HeaderProviderService } from '../shared/header/header.provider.service';
import * as tableState from '../state/all-tables';
import { AllTablesFaceComponent } from './all-tables-face.component';


@Component({
  selector: 'mfmp-all-tables',
  standalone: true,
  imports: [CommonModule, AllTablesFaceComponent],
  template: `
    <mfmp-all-tables-face [query]="query()" ]></mfmp-all-tables-face>`
})

export class AllTablesHeadComponent implements OnInit {
  store = inject(Store);
  router = inject(Router);
  signal = inject(signal);
  activatedRoute = inject(ActivatedRoute);
  headerService = inject(HeaderProviderService);
  readonly query = this.store.selectSignal(tableState.feature.selectQuery);
  /**
   * set up the page header and get the current query from the host
   */
  ngOnInit(): void {
    this.headerService.buildPageHeader('all-tables');
    this.store.dispatch(tableState.actions.requestPage());
  }

  /**
   * Submit the query and redirect to the reports page
   *
   * @param form
   */
  submitForm(form: string) {
    this.store.dispatch(tableState.actions.loadResults({ query: form }));
    this.router.navigate(['reports'], { relativeTo: this.activatedRoute });
  }
}

错误及调用栈 #

ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(Standalone[AllTablesHeadComponent])[signal -> signal -> signal -> signal]: 
  NullInjectorError: No provider for signal!
get@http://localhost:4200/vendor.js:51983:21
.
.
.
complete@http://localhost:4200/vendor.js:5869:12
checkComplete@http://localhost:4200/vendor.js:7566:18
    Angular 23
    webpackJsonpCallback jsonp chunk loading:77
    <anonymous> default-src_app_shared_report-pages_report-pages_head_component_ts.js:2
core.mjs:10194:22
    Angular 2
    RxJS 6
    Angular 23
    webpackJsonpCallback jsonp chunk loading:77
    <anonymous> default-src_app_shared_report-pages_report-pages_head_component_ts.js:2

问题出在你错误地用inject(signal)尝试注入signal函数。signal是Angular提供的工具函数，用来创建信号，它不是可注入的服务，完全不需要通过inject()获取。

解决步骤：

1. 删除组件中的这一行代码：

   signal = inject(signal);
   

2. 同时修正模板里的语法错误，去掉多余的右方括号：

   <mfmp-all-tables-face [query]="query()"></mfmp-all-tables-face>
   

完成后组件即可正常运行，你不需要添加任何额外的提供者——store.selectSignal()的使用本身和signal函数没有依赖关系，之前的错误完全是因为错误注入了一个不需要注入的函数。

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