@let: Angular 1의 새로운 기능 컴파일러

소개

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

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

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

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

이렇게 새로운 제어 흐름 구문이 탄생했습니다

• @if
• @for
• @스위치

그리고 최근에는 @let

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

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

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

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

<!-- older control flow syntax -->
<div *ngIf="user$ |async as user">
  {{ user.name }}
</div>

<!-- new control flow syntax -->
@if(user$ |async; as user){
  <div>{{ user.name }}</div>
}

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

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

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

하지만 반환값이 숫자, 특히 숫자 0인 경우

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

여기서 @let이 등장합니다.

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

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

@let myNumber = (numbers$ | async) ?? 0;
<div>{{ myNumber }}</div>

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

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

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

조건에 함수를 사용하는 것은 항상 권장되지 않았습니다. 조건에서 함수를 사용하면 마우스를 조금만 움직이거나 템플릿이 변경되어도 함수가 재평가된다는 점에서 성능에 영향을 미칩니다.

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

<ul>
  @for(user of users(); track user.id) {
    @let isAdmin = checkIfAdmin(user);
   <li>User is admin: {{ isAdmin }}</li>
  }
</ul>

신호와 함께 @let 사용

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

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

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

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

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

<div>  
    @for (score of scores(); track $index) {
        @let total = total + score, max = calcMax(score);
        <h1>final score: {{ total }}</h1>
    }
</div>

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

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

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

위 내용은 @let: Angular 1의 새로운 기능 컴파일러의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!