Übergeben Sie den manuellen Injector an die toSignal-Funktion, um Fehler bei der externen Kontextinjektion zu vermeiden

Erforderliche Signaleingabe kann nicht im Konstruktor oder Feldinitialisierer verwendet werden, da der Wert nicht verfügbar ist. Um auf den Wert zuzugreifen, besteht meine Lösung darin, die Signaländerung zu beobachten, eine HTTP-Anfrage an den Server zu stellen und den Signalwert festzulegen. Es gibt viele Diskussionen darüber, den Effekt nicht zu nutzen, und ich muss andere Lösungen finden, um ihn zu entfernen.

Erforderliche Signaleingänge sind in den Lebenszyklusmethoden ngOnInit und ngOnChanges verfügbar. Allerdings verursacht toSignal darin Fehler, da sie außerhalb des Injektionskontexts liegen. Es kann auf zwei Arten behoben werden:

• Übergeben Sie den manuellen Injektor an die toSignal-Funktion
• Führen Sie die toSignal-Funktion in der Rückruffunktion von runInInjectionContext aus.

Signaleingang wirksam verwenden (Wird später geändert)

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());
   });
 }
}

Die Codeänderungen sind die folgenden:

• Erstellen Sie einen StarWarService, um die API aufzurufen und das Observable zurückzugeben
• Die StarWarComponent implementiert die OnInit-Schnittstelle.
• Verwenden Sie die Injektionsfunktion, um den Injektor der Komponente zu injizieren
• Rufen Sie in ngOnInit die StarWar-API mit dem erforderlichen Signaleingang auf und erstellen Sie ein Signal aus dem Observable. Um den Fehler zu vermeiden, übergeben Sie den manuellen Injektor an die toSignal-Funktion.
• In ngOnInit ruft die runInInjectionContext-Funktion die toSignal-Funktion im Kontext des Injektors auf.

Erstellen Sie StarWarService

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);
     }));
 }
}

Erstellen Sie einen StarWarService mit einer getData-Methode, um die StarWar-API aufzurufen und eine Person abzurufen. Das Ergebnis ist ein Observable einer Person oder undefiniert.

Erforderlicher Signaleingang

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 {}
}

Sowohl Jedi als auch Sith sind erforderliche Signaleingänge; Daher kann ich sie nicht im Konstruktor verwenden oder toSignal mit dem Dienst aufrufen, um Felder zu initialisieren.

Ich implementieren die OnInit-Schnittstelle und greife auf beide Signaleingänge in der ngOnInit-Methode zu.

Bereiten Sie die App-Komponente vor

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-Komponente verfügt über zwei Instanzen von StarWarComponent. Die Jedi-ID der ersten Instanz ist 1 und die ID der zweiten Instanz ist 10. Die Sith-ID der Instanzen ist 4 bzw. 44.

Übergeben Sie den manuellen Injektor an toSignal, um einen Jedi-Kämpfer zu befragen

export class StarWarComponent implements OnInit {
 // required signal input
 jedi = input.required<number>();

 starWarService = inject(StarWarService);
 injector = inject(Injector);
 light!: Signal<Person | undefined>;
}

In die StarWarComponent-Komponente injiziere ich den StarWarService und den Injektor der Komponente. Darüber hinaus deklariere ich ein Lichtsignal, um das von der toSignal-Funktion zurückgegebene Ergebnis zu speichern.

interface ToSignalOptions<T> {
 initialValue?: unknown;
 requireSync?: boolean;
 injector?: Injector;
 manualCleanup?: boolean;
 rejectErrors?: boolean;
 equal?: ValueEqualityFn<T>;
}

Die ToSignalOptions-Option verfügt über eine Injector-Eigenschaft. Wenn ich die toSignal-Funktion außerhalb des Injektionskontexts verwende, kann ich den Injektor der Komponente an die Option übergeben.

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 der ngOnInit-Methode rufe ich den Dienst auf, um ein Observable zu erhalten, und verwende die toSignal-Funktion, um ein Signal zu erstellen. Das zweite Argument ist eine Option mit dem Injektor der Komponente.

<app-star-war-person [person]="light()" kind="Jedi Fighter" />

Als nächstes übergebe ich das Lichtsignal an die StarWarPersonComponent-Komponente, um die Details eines Jedi-Kämpfers anzuzeigen.

runInInjectionContext führt toSignal im Injektor der Komponente aus

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()));
   })
 }
}

Ich deklariere ein böses Signal, um das von der toSignal-Funktion zurückgegebene Ergebnis zu speichern. Das erste Argument von runInInjectionContext ist der Injektor der Komponente. Das zweite Argument ist eine Callback-Funktion, die die toSignal-Funktion ausführt und die Person der bösen Variablen zuweist.

<app-star-war-person [person]="evil()" kind="Sith Lord" />

Als nächstes übergebe ich das böse Signal an die StarWarPersonComponent-Komponente, um die Details des Sith-Lords anzuzeigen.

Wenn eine Komponente über erforderliche Signaleingänge verfügt, kann ich auf die Werte in ngOnInit oder ngOnChanges zugreifen, um HTTP-Anfragen oder andere Vorgänge durchzuführen. Dann muss ich keinen Effekt erstellen, um die erforderlichen Signale zu beobachten und das Backend aufzurufen.

Schlussfolgerungen:

• Der erforderliche Signaleingang kann im Konstruktor nicht aufgerufen werden, da der Wert zu diesem Zeitpunkt nicht verfügbar ist.
• Die erforderlichen Signaleingänge können in den Methoden ngOnInit oder ngOnChanges verwendet werden.
• toSignal löst Fehler in den Methoden ngOnInit und ngOnChanges aus, da es außerhalb des Injektionskontexts ausgeführt wird
• Übergeben Sie den manuellen Injektor an die Injektoroption von ToSignalOptions
• Rufen Sie die toSignal-Funktion in der Rückruffunktion der runInInjectionContext-Funktion auf.

Damit ist Tag 33 der Ironman-Challenge abgeschlossen.

Referenzen:

• offizielle toSignal-Dokumentation: https://angular.dev/guide/signals/rxjs-interop#injection-context
• ToSignalOptions: https://angular.dev/api/core/rxjs-interop/ToSignalOptions#
• RunInInjectionContext: https://angular.dev/api/core/rxjs-interop/ToSignalOptions#
• GitHub-Problem: https://github.com/angular/angular/issues/50947
• Stackblitz-Demo: https://stackblitz.com/edit/stackblitz-starters-xsitft?file=src%2Fstar-war.component.ts

Das obige ist der detaillierte Inhalt vonÜbergeben Sie den manuellen Injector an die toSignal-Funktion, um Fehler bei der externen Kontextinjektion zu vermeiden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!