각도 연결 신호

Angular 19에서 linkedSignal 기능은 계산된 논리와 동기화된 상태를 유지하는 반응 변수를 도입합니다. 이는 반응성을 향상시키고 코드베이스를 단순화하는 강력한 추가 기능입니다.

linkedSignal 작동 방식

linkedSignal은 제공된 계산 함수에서 값을 파생하여 작동합니다. 작동 방법은 다음과 같습니다.

1. 계산 함수: linkedSignal에 함수를 제공하면 그 결과가 linkedSignal의 값이 됩니다.
2. 자동 업데이트: linkedSignal은 계산에 대한 입력이 변경될 때마다 자동으로 업데이트됩니다.
3. 수동 업데이트: linkedSignal의 값을 수동으로 변경할 수도 있습니다.

---

사용 예

const shippingOptions = signal(['Ground', 'Air', 'Sea']);
const selectedOption = linkedSignal(() => shippingOptions()[0]);

단계별:

1. 초기 값:

console.log(selectedOption()); // 'Ground'

selectedOption은 ShippingOptions의 첫 번째 항목에 연결되므로 'Ground'로 시작합니다.

1. 수동 업데이트:

selectedOption.set(shippingOptions()[2]);
console.log(selectedOption()); // 'Sea'

selectedOption을 배열의 세 번째 옵션인 'Sea'로 수동 설정합니다.

1. 종속성 변경 시 자동 업데이트:

shippingOptions.set(['Email', 'Will Call', 'Postal service']);
console.log(selectedOption()); // 'Email'

shippingOptions가 변경되면 linkedSignal이 다시 계산됩니다. 이제 새로운 첫 번째 옵션인 '이메일'이 반영됩니다.

다음은 사용자 정의 계산 기능과 함께 linkedSignal을 사용하는 예입니다
©
온도를 섭씨와 화씨 모두로 관리한다고 가정해 보겠습니다. linkedSignal을 사용하면 사용자 정의 기능을 통해 화씨와 섭씨를 계속 연결할 수 있습니다.

const celsius = signal(25); // Base signal for temperature in Celsius
const fahrenheit = linkedSignal(() => celsius() * 9/5 + 32); // Compute Fahrenheit from Celsius
console.log(fahrenheit()); // 77 (25°C in Fahrenheit)
// Change the Celsius value
celsius.set(30);
console.log(fahrenheit()); // 86 (30°C in Fahrenheit)
// Manually update Fahrenheit (breaks auto-link temporarily)
fahrenheit.set(100);
console.log(fahrenheit()); // 100
console.log(celsius()); // Still 30, as Fahrenheit is overridden
// Change Celsius again to reset linkage
celsius.set(0);
console.log(fahrenheit()); // 32 (0°C in Fahrenheit)

왜 그것을 사용합니까?

상태를 동기화: linkedSignal이 항상 최신 계산 상태와 일치하도록 보장합니다.
편리함: 종속성이 변경될 때 linkedSignal을 수동으로 업데이트할 필요가 없으며 자동으로 업데이트됩니다.
유연함: 필요한 경우 해당 값을 수동으로 재정의할 수 있습니다.

핵심 내용:

linkedSignal은 해당 값을 일부 로직과 연결하므로 로직이 변경될 때 자동으로 최신 상태를 유지합니다. 한 상태가 다른 상태에 종속되는 시나리오에 적합합니다.

위 내용은 각도 연결 신호의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!