소개

Angular 18.1이 출시되면서 이 버전에는 컴파일러에 하나 이상의 템플릿 변수를 선언하는 기능이라는 흥미로운 새 기능이 도입되었습니다.
이 기능은 어떻게 사용되며, 다양한 사용 사례는 무엇입니까?

이 글은 답변을 목적으로 합니다.

컴파일러의 최신 기능: @let

최신 버전의 Angular를 통해 팀은 컴파일러에 새로운 기능을 도입했으며 이 기능은 @-syntax로 변환됩니다.

이것이 새로운 제어 흐름 구문이 탄생한 방식입니다.

• @만약에
• @을 위한
• @스위치

그리고 최근에는 @let

일반적으로 템플릿 변수를 생성하는 가장 쉬운 방법은

• 키워드가 다음과 같은 *ngIf 구조적 지시문 예어

또는 새로운 제어 흐름 구문 사용

• @if 키워드를 다음과 같이 사용:

  {{ user.name }}



@if(user$ |async; as user){
  
{{ user.name }}
}

이 편리한 기능을 통해 나중에 템플릿에서 사용할 수 있도록 비동기 파이프의 결과를 변수에 저장할 수 있었습니다.

그러나 이 구문은 몇 가지 질문을 제기합니다. 여기서 조건은 비동기 파이프의 반환이 true인지 확인하므로 반환 값이 javascript에서 false로 간주되는 값과 다른지 여부를 확인합니다.

이 조건은 반환값이 객체이거나 배열인 경우 정말 잘 작동합니다.

그러나 반환이 숫자이고 특히 숫자 0인 경우

@if(((numbers$ |async) !=== undefined || (numbers$ |async) !=== null) ; as myNumber){
  
{{ myNumber }}
}

@let이 등장하는 곳입니다.

@let은 조건을 확인하지 않고 간단한 방법으로 로컬 템플릿 변수를 선언할 수 있게 해줍니다.

위의 코드 예제는 작성하기가 훨씬 더 간단하고 우아해졌습니다.

@let myNumber = (numbers$ | async) ?? 0;
{{ myNumber }}

이렇게 하면 myNumber 변수가 항상 표시됩니다.

@let를 사용하는 다양한 방법

변수 선언을 사용하는 가장 일반적인 시나리오 중 하나는 복잡한 표현식의 결과를 저장하는 것입니다.

조건에 함수를 사용하는 것은 항상 권장되지 않았습니다. 조건에서 함수를 사용하면 약간의 마우스 움직임이나 템플릿 변경으로 함수가 재평가된다는 점에서 성능에 영향을 미쳤습니다.

@let은 위에서 설명한 대로 평가하지 않고 단순히 지역 변수를 선언합니다. 이 변수는 종속성 중 하나가 변경되는 경우에만 재평가됩니다. 따라서 복잡한 표현식과 같은 표현식에서는 함수를 호출하는 것도 나쁘지 않습니다.

@for(user of users(); track user.id) { @let isAdmin = checkIfAdmin(user);
• User is admin: {{ isAdmin }}
}

신호와 함께 @let 사용

@let은 시그널과 호환되며 다음과 같이 사용됩니다.

@let userColor = user().preferences?.colors?.primaryColor || 'white';
user favorite color is {{ userColor }}

@let 및 자바스크립트 표현식

보시다시피 @let는 클래스 인스턴스화 등을 제외하고 모든 종류의 자바스크립트 표현식을 평가하는 데 사용할 수 있습니다.

이런 방식으로 산술 연산자가 해석되고 여러 변수를 여러 줄 또는 한 줄에 선언할 수 있습니다.

  
    @for (score of scores(); track $index) {
        @let total = total   score, max = calcMax(score);
        
final score: {{ total }}
    }

@let이 제공하는 다른 멋진 기능

위에서 설명한 대로 @let의 동작은 자바스크립트의 let 동작과 매우 유사하며 다음과 같은 이점이 있습니다.

• 범위는 자바스크립트의 let 범위처럼 작동합니다.
• 템플릿의 입력 간섭이 개선되었습니다.
• 변수(let)가 선언되기 전에 사용되면 오류가 발생합니다.