Angular 버전 12의 새로운 기능은 무엇인가요?🔥

안녕하세요 여러분 👋

Angular 버전 12는 몇 가지 멋진 기능과 함께 어제 공식적으로 출시되었습니다. 이 기사에서는 Angular 12 릴리스의 두 가지 새로운 기능을 살펴보겠습니다.

1. 컴포넌트 인라인 스타일의 Sass 지원

2. Angular 템플릿에서 Nullish 병합

구성 요소 인라인 스타일의 SASS

문제: 이전 Angular 버전에서는 Sass 기능이 외부.scss 파일에서 사용되는 경우에만 사용하도록 제한되었습니다. @Component 데코레이터의 스타일 필드에서 인라인 스타일로 사용될 때 Sass 기능을 사용할 수 없었습니다.

시나리오로 설명하자면 아래 코드에서 $color-red라는 새로운 변수가 생성되어 h1color 속성에 할당된 것을 볼 수 있습니다.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `<h1>Hello world from {{title}}</h1>`
  styles: [
  `
  $color-red: red; // declaring a Sass variable
  h1 {
    color: $color-red; // using the Sass variable here
  }
  `
  ]
})
export class AppComponent {
  title = 'angular';
}

이상적으로는 h1 콘텐츠가 빨간색으로 표시되어야 합니다. 그러나 그렇지 않습니다. 이것이 Angular 버전 11까지의 문제입니다.

다음은 브라우저의 출력입니다.



솔루션: Angular 버전 12부터 Angular 구성 요소는 이제 @Component 데코레이터의 스타일 필드에서 인라인 Sass를 지원합니다.

위와 동일한 코드로 Angular v12에서 애플리케이션을 실행하면 h1 콘텐츠가 빨간색으로 표시됩니다.

Note: If you are upgrading from Angular v11 to v12, set "inlineStyleLanguage": "scss” to angular.json file. If you are creating a new Angular v12, this will be available by default.

Angular 템플릿의 Nullish 병합

null 병합 연산자(??)는 typescript 클래스 파일에서만 사용하도록 제한되었습니다. 이전 버전의 Angular에서는 Angular 템플릿에서 이 연산자를 사용할 수 없었습니다.

Angular 버전 12부터 html templates에서도 사용할 수 있습니다. 👏

이전에는 값이 null인지 정의되지 않았는지 확인하려면 아래 구문을 사용해야 했습니다.

{{amount !== null && amount !== undefined ? amount : 0 }}

이제 다음과 같이 단순화할 수 있습니다.

{{amount ?? 0 }}

도움이 되었기를 바랍니다. 읽어주셔서 감사합니다!