외부 컨텍스트 주입 오류를 방지하려면 수동 주입기를 toSignal 함수에 전달하세요.

값을 사용할 수 없기 때문에 생성자 또는 필드 초기화 프로그램에서 필수 신호 입력을 사용할 수 없습니다. 값에 액세스하기 위해 내 솔루션은 신호 변경이 실제로 일어나는지 관찰하고 서버에 HTTP 요청을 한 다음 신호 값을 설정하는 것입니다. 효과를 사용하지 않는 것에 대한 논의가 많은데, 이를 제거하려면 다른 해결 방법을 찾아야 합니다.

필요한 신호 입력은 ngOnInit 및 ngOnChanges 수명 주기 메서드에서 액세스할 수 있습니다. 그러나 toSignal은 주입 컨텍스트 외부에 있기 때문에 오류를 발생시킵니다. 이 문제는 두 가지 방법으로 해결할 수 있습니다:

• 수동 인젝터를 toSignal 함수에 전달
• runInInjectionContext의 콜백 함수에서 toSignal 함수를 실행합니다.

신호 입력 사용 효과 (추후 변경 예정)

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

변경된 코드는 다음과 같습니다.

• API를 호출하고 Observable을 반환하는 StarWarService를 생성하세요
• StarWarComponent는 OnInit 인터페이스를 구현합니다.
• inject 기능을 이용해 컴포넌트의 Injector를 주입합니다
• ngOnInit에서 필요한 신호 입력을 사용하여 StarWar API를 호출하고 Observable에서 신호를 생성합니다. 오류를 방지하려면 수동 주입기를 toSignal 함수에 전달하세요.
• ngOnInit에서 runInInjectionContext 함수는 인젝터의 컨텍스트에서 toSignal 함수를 호출합니다.

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

사람을 검색하기 위해 StarWar API를 호출하는 getData 메소드로 StarWarService를 생성합니다. 결과는 사람의 Observable이거나 정의되지 않은 것입니다.

필수 신호 입력

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

제다이와 시스는 모두 필수 신호 입력입니다. 따라서 생성자에서 이를 사용하거나 서비스와 함께 toSignal을 호출하여 필드를 초기화할 수 없습니다.

OnInit 인터페이스를 구현하고 ngOnInit 메서드에서 두 신호 입력에 모두 액세스합니다.

앱 구성 요소 준비

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

앱 구성 요소에는 StarWarComponent 인스턴스가 두 개 있습니다. 첫 번째 인스턴스의 제다이 ID는 1이고 두 번째 인스턴스의 ID는 10입니다. 인스턴스의 시스 ID는 각각 4와 44입니다.

수동 인젝터를 toSignal에 전달하여 제다이 전투기에 쿼리

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

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

StarWarComponent 컴포넌트에는 StarWarService와 해당 컴포넌트의 인젝터를 주입합니다. 게다가 toSignal 함수에서 반환된 결과를 저장하기 위해 light Signal을 선언합니다.

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

ToSignalOptions 옵션에는 인젝터 속성이 있습니다. 인젝션 컨텍스트 외부에서 toSignal 함수를 사용할 때 컴포넌트의 인젝터를 옵션에 전달할 수 있습니다.

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

ngOnInit 메소드에서는 서비스를 호출하여 Observable을 획득하고 toSignal 함수를 사용하여 신호를 생성합니다. 두 번째 인수는 구성 요소의 인젝터에 대한 옵션입니다.

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

다음으로 조명 신호를 StarWarPersonComponent 구성 요소에 전달하여 제다이 전투기의 세부 정보를 표시합니다.

runInInjectionContext는 구성 요소의 인젝터에서 toSignal을 실행합니다.

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

toSignal 함수에서 반환된 결과를 저장하기 위해 악의적인 신호를 선언합니다. runInInjectionContext의 첫 번째 인수는 구성 요소의 인젝터입니다. 두 번째 인수는 toSignal 함수를 실행하고 사람을 evil 변수에 할당하는 콜백 함수입니다.

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

다음으로 StarWarPersonComponent 구성 요소에 사악한 신호를 전달하여 시스 군주의 세부 정보를 표시합니다.

구성 요소에 신호 입력이 필요한 경우 ngOnInit 또는 ngOnChanges의 값에 액세스하여 HTTP 요청이나 기타 작업을 수행할 수 있습니다. 그러면 필요한 신호를 감시하고 백엔드를 호출하기 위한 효과를 만들 필요가 없습니다.

결론:

• 그 당시 값을 사용할 수 없기 때문에 필수 신호 입력을 생성자에서 호출할 수 없습니다.
• 필요한 신호 입력은 ngOnInit 또는 ngOnChanges 메서드에서 사용할 수 있습니다.
• toSignal은 주입 컨텍스트 외부에서 실행되기 때문에 ngOnInit 및 ngOnChanges 메서드에서 오류를 발생시킵니다
• ToSignalOptions의 인젝터 옵션에 수동 인젝터를 전달
• runInInjectionContext 함수의 콜백 함수에서 toSignal 함수를 호출합니다.

이걸로 아이언맨 챌린지 33일차를 마무리합니다.

참고자료:

• toSignal 공식 문서: 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 문제: https://github.com/angular/angular/issues/50947
• Stackblitz 데모: https://stackblitz.com/edit/stackblitz-starters-xsitft?file=src%2Fstar-war.comComponent.ts

위 내용은 외부 컨텍스트 주입 오류를 방지하려면 수동 주입기를 toSignal 함수에 전달하세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!