Required signal input can not be used in the constructor or field initializer because the value is unavailable. To access the value, my solution is to watch the signal change in effect, make an HTTP request to the server, and set the signal's value. There are many discussions on not using the effect, and I must find other solutions to remove it.
Required signal inputs are accessible in the ngOnInit and ngOnChanges lifecycle methods. However, toSignal throws errors in them because they are outside the injection context. It can be fixed in two ways:
import { Component, effect, inject, Injector, input, signal } from '@angular/core';
import { getPerson, Person } from './star-war.api';
import { StarWarPersonComponent } from './star-war-person.component';
@Component({
selector: 'app-star-war',
standalone: true,
imports: [StarWarPersonComponent],
template: `
<p>Jedi Id: {{ jedi() }}</p>
<app-star-war-person [person]="fighter()" kind="Jedi Fighter" />`,
})
export class StarWarComponent {
// required signal input
jedi = input.required<number>();
injector = inject(Injector);
fighter = signal<Person | undefined>(undefined);
constructor() {
effect((OnCleanup) => {
const sub = getPerson(this.jedi(), this.injector)
.subscribe((result) => this.fighter.set(result));
OnCleanup(() => sub.unsubscribe());
});
}
}
The code changes are the following:
export type Person = {
name: string;
height: string;
mass: string;
hair_color: string;
skin_color: string;
eye_color: string;
gender: string;
films: string[];
}
import { HttpClient } from "@angular/common/http";
import { inject, Injectable } from "@angular/core";
import { catchError, Observable, of, tap } from "rxjs";
import { Person } from "./person.type";
const URL = 'https://swapi.dev/api/people';
@Injectable({
providedIn: 'root'
})
export class StarWarService {
private readonly http = inject(HttpClient);
getData(id: number): Observable<Person | undefined> {
return this.http.get<Person>(`${URL}/${id}`).pipe(
tap((data) => console.log('data', data)),
catchError((err) => {
console.error(err);
return of(undefined);
}));
}
}
Create a StarWarService with a getData method to call the StarWar API to retrieve a person. The result is an Observable of a person or undefined.
import { Component, input } from '@angular/core';
@Component({
selector: 'app-star-war',
standalone: true,
template: `
<p>Jedi Id: {{ jedi() }}</p>
<p>Sith Id: {{ sith() }}</p>
`,
})
export class StarWarComponent implements OnInit {
// required signal input
jedi = input.required<number>();
// required signal input
sith = input.required<number>();
ngOnInit(): void {}
}
Both jedi and sith are required signal inputs; therefore, I cannot use them in the constructor or call toSignal with the service to initialize fields.
I implement the OnInit interface and access both signal inputs in the ngOnInit method.
import { Component, VERSION } from '@angular/core';
import { StarWarComponent } from './star-war.component';
@Component({
selector: 'app-root',
standalone: true,
imports: [StarWarComponent],
template: `
<app-star-war [jedi]="1" [sith]="4" />
<app-star-war [jedi]="10" [sith]="44" />`,
})
export class App {}
App component has two instances of StarWarComponent. The jedi id of the first instance is 1 and the id of the second instance is 10. The sith id of the instances are 4 and 44 respectively.
export class StarWarComponent implements OnInit {
// required signal input
jedi = input.required<number>();
starWarService = inject(StarWarService);
injector = inject(Injector);
light!: Signal<Person | undefined>;
}
In the StarWarComponent component, I inject the StarWarService and the component's injector. Moreover, I declare a light Signal to store the result returned from the toSignal function.
interface ToSignalOptions<T> {
initialValue?: unknown;
requireSync?: boolean;
injector?: Injector;
manualCleanup?: boolean;
rejectErrors?: boolean;
equal?: ValueEqualityFn<T>;
}
The ToSignalOptions option has an injector property. When using the toSignal function outside the injection context, I can pass the component's injector to the option.
export class StarWarComponent implements OnInit {
// required signal input
jedi = input.required<number>();
starWarService = inject(StarWarService);
injector = inject(Injector);
light!: Signal<Person | undefined>;
ngOnInit(): void {
this.light = toSignal(this.starWarService.getData(this.jedi()), { injector: this.injector });
}
}
In the ngOnInit method, I call the service to obtain an Observable, and use the toSignal function to create a signal. The second argument is an option with the component's injector.
<app-star-war-person [person]="light()" kind="Jedi Fighter" />
Next, I pass the light signal to the StarWarPersonComponent component to display the details of a Jedi fighter.
export class StarWarComponent implements OnInit {
// required signal input
sith = input.required<number>();
starWarService = inject(StarWarService);
injector = inject(Injector);
evil!: Signal<Person | undefined>;
ngOnInit(): void {
// this also works
runInInjectionContext(this.injector, () => {
this.evil = toSignal(this.starWarService.getData(this.sith()));
})
}
}
I declare an evil Signal to store the result returned from the toSignal function. The first argument of the runInInjectionContext is the component's injector. The second argument is a callback function that executes the toSignal function and assigns the person to the evil variable.
<app-star-war-person [person]="evil()" kind="Sith Lord" />
Next, I pass the evil signal to the StarWarPersonComponent component to display the details of the Sith Lord.
If a component has required signal inputs, I can access the values in the ngOnInit or ngOnChanges to make HTTP requests or other operations. Then, I don't need to create an effect to watch the required signals and call the backend.
This wraps up day 33 of the ironman challenge.
References:
以上是Pass manual injector to the toSignal function to avoid outside Context Injection error的详细内容。更多信息请关注PHP中文网其他相关文章！
