Angular의 향상된 템플릿 구문 및 간소화된 마이그레이션

Angular 18.2가 출시되었습니다. 소규모 릴리스일 수도 있지만 개발자 경험을 향상시키는 몇 가지 중요한 개선 사항이 포함되어 있습니다. 이 기사에서는 세련된 @let 구문과 새로운 마이그레이션 도식 도입에 초점을 맞춰 이러한 흥미로운 기능을 자세히 살펴봅니다.

@let 개선

많은 Angular 개발자들이 개인적으로 선호하는 @let 구문은 18.2에서도 계속 발전하고 있습니다. 템플릿 변수 정의에 대한 두 가지 고유한 접근 방식을 제공하여 코드에 더 큰 유연성과 가독성을 제공합니다.

동적 @let: @for 및 @if 지시문 내에서 템플릿 참조 변수를 활용하는 기능을 수용합니다. 템플릿 내의 양식 값에 손쉽게 액세스하는 것을 상상해 보십시오.

<input #myForm name="my-from" [maxlength]="maxLength" />
@let formValue = myForm.value

Async @let: 이전 버전에서는 Observable에서 내보낸 최신 값에 액세스하려면 ngIf 지시어가 필요했습니다.

@if ({ tasks:  tasks$ | async }; as taskData) {

//shows the @if block before the 1st tasks$ emit
 @for (task of taskData.tasks; track task.id) {
    [...]
  } @empty {
    No Tasks pending.
  }
}

이제 더 적은 수의 선과 향상된 선명도로 동일한 결과를 얻을 수 있습니다

@let tasks = tasks$ | async;
@for (task of tasks; track task.id) {
  [...]
}
@empty {
  No Tasks pending.
}

@let 변수는 읽기 전용이며 재할당할 수 없다는 점을 기억하세요. 그러나 해당 값은 각 변경 감지 주기에 따라 자동으로 업데이트됩니다. 템플릿과 클래스 구성 요소 내에서 동일한 이름을 사용하는 것은 기술적으로 가능하지만 이 관행이 장기적으로 미치는 영향에 대해서는 추가 조사가 필요합니다.

마이그레이션이 쉬워졌습니다: 마을의 새로운 설계도

Angular 17부터 우리는 세 가지 주요 마이그레이션 도식을 접했습니다.

• 템플릿 구문 제어 흐름: ng g @angular/core:control-flow
• 새 앱 빌더: ng update @angular/cli --name use-application-builder
• 독립형 구성 요소: ng g @angular/core:standalone

Angular 18.2는 더욱 유용한 도구로 이 툴킷을 확장합니다.

• 독립형 구성 요소 경로 변환: ng g @angular/core:route-lazy-loading을 사용하여 쉽게 독립형 구성 요소에서 지연 로드 경로를 생성합니다.
• DI 마이그레이션: ng g @angular/core:inject-migration을 사용하여 생성자 기반 종속성 주입에서 새로운 기능적 inject() 접근 방식으로의 전환을 단순화합니다.

결론 및 향후 전망

Angular 18.2는 마이너 릴리스일 수 있지만 @let 작업을 즐기고 간소화된 마이그레이션 프로세스를 선호하는 사람들에게 상당한 개선 사항을 제공합니다. 2024년 11월에 Angular 19에 계획된 주요 기능을 간절히 기대하고 있으므로 앞으로 6주 후에 출시될 버전 18.3은 또 다른 흥미로운 디딤돌이 될 것을 약속합니다. 그러니 침착함을 유지하고 코딩을 계속하며 Angular의 발전을 받아들이세요!

위 내용은 Angular의 향상된 템플릿 구문 및 간소화된 마이그레이션의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!