独立组件中缺少 selectSignal 的依赖关系

Question

我尝试在独立组件中使用 selecctSignal 导致了运行时错误：

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

​

Answer 1

signal

不被注入，可以去掉下面这行：

signal = inject(signal);

signal

只是一个可以使用的方法，它没有在依赖容器中注册。