Angular 및 15의 개선

1) inject를 사용하여 생성자 없이 Angular 14에서 서비스를 주입합니다.
이전에는 모든 서비스를 삽입하려면 생성자가 있는 클래스가 항상 필요했습니다.

class MyClass {
  constructor(private myService: MyService) {}
}

이제 함수와 클래스 모두에 서비스를 주입할 수 있습니다. 변수를 선언하고 내부에 서비스 이름을 삽입하기 위해 동일하게 설정하면 됩니다.

const myService = 주입(MyService);
예를 들어, 이는 일반적으로 클래스 대신 함수로 수행되는 인터셉터 및 가드에 유용합니다.

2) Angular 15에서 줄을 저장하는 자동 닫힘 태그.
이 버전부터 단일 태그가 있는 구성 요소를 사용할 수 있습니다.

<내 구성요소 />

이전에는 구성 요소 태그를 열고 닫아야 사용할 수 있었습니다.

<내 구성 요소>

3) 바로가기를 만들어 Angular에서 가져오기를 줄입니다.
다음과 같이 긴 가져오기 대신:

'../../comComponents/my-comComponent'에서 { MyComponent } 가져오기;
다음과 같이 가져오기를 단축할 수 있습니다.

'@comComponents/my-comComponent'에서 { MyComponent } 가져오기;
이를 달성하려면 tsconfig.json 파일로 이동하여compileOptions 속성 아래에 경로를 추가하세요. 경로 내부에서 자신만의 가져오기 바로가기를 구성할 수 있습니다.

{
  "compilerOptions": {
    "paths": {
      "@components/*": ["src/app/components/*"]
    }
  }
}

구성 요소 내에 있고 해당 구성 요소에 특정한 것을 사용하려는 경우 ./를 사용하여 상대적으로 가져와서 해당 리소스에 액세스하는 것이 좋습니다. 하지만 상위 폴더에 접근할 때는 @ 단축키를 사용하세요. 문제가 발생하면 Visual Studio Code를 닫았다가 다시 열어야 할 수도 있습니다. 이러한 작은 세부 사항은 코드를 최대한 체계적으로 유지하는 데 차이를 만듭니다.

4) Angular 15에서 NgOptimizedImage 지시문을 사용하여 이미지 로드를 최적화합니다.
15개의 이미지가 포함된 목록이 있고 일반적으로 [src]를 사용하여 이를 반복하는 경우 애플리케이션이 시작될 때 15개의 이미지를 모두 한 번에 로드하는 문제에 직면하게 되어 성능이 저하됩니다.

이 문제를 해결하기 위해 Angular는 NgOptimizedImage 지시어를 제공합니다. 사용하려면 가져오기만 하면 됩니다.

'@angular/common'에서 { NgOptimizedImage } 가져오기;
그리고 [src] 대신 [ngSrc]를 사용하세요. 이렇게 하면 이미지가 느리게 로드되어 성능이 향상됩니다. 그러나 지시어에는 다른 많은 구성이 있습니다. 지연 로딩만 원하는 경우 HTML 표준의 일부이며 모든 브라우저와 호환되는 loading="lazy" 속성을 사용하는 것이 좋습니다.

권장 사항: 메뉴 상단에 기본 이미지가 있는 경우 앱이 열릴 때 가장 먼저 로드되므로 지연 로딩으로 설정하지 마세요. 바로 로드할 필요는 없으므로 스크롤 아래에 나타날 수 있는 이미지에만 적용하세요.

이는 성능 향상에 도움이 되므로 좋은 SEO가 필요한 SSR 앱과 같은 공용 애플리케이션에 매우 중요합니다.

— EfisioDev의 Angular 과정을 기반으로 한 노트 —

위 내용은 Angular 및 15의 개선의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!