각도 구성 요소에 대한 조건부 템플릿

tldr;

Nx 작업 공간에서 작업할 때 얻을 수 있는 많은 이점 중 하나는 애플리케이션 간에 코드를 공유할 수 있다는 것입니다. Angular 응용 프로그램에서 이는 여러 응용 프로그램 간에 구성 요소를 공유할 수 있음을 의미합니다. 문제는 기능이 동일하더라도 응용 프로그램마다 설계 시스템이 다를 수 있다는 것입니다. 나는 최근에 이 문제에 부딪쳤고 가장 좋은 길을 확신할 수 없었습니다. 제 상황에서 우리의 오래된 디자인 시스템은 (고도로 사용자 정의된) Bootstrap을 기반으로 했습니다. 새로운 앱은 Tailwind를 사용합니다. 그래서 앞으로 어떻게 해야 할지 조금 막막했습니다. 처음에는 Bootstrap 클래스와 혼합된 HTML에서 Tailwind 클래스를 던질 수 있다고 생각했습니다. 앱에 Bootstrap 스타일이 포함되어 있지 않으면 Tailwind 스타일만 사용하고 그 반대도 마찬가지이므로 이는 기술적으로 작동합니다. 그러나 내 걱정은 HTML 템플릿이 매우 긴 클래스 목록으로 제어할 수 없다는 것이었습니다. 그러나 템플릿에 대한 HTML을 조건부로 교체하는 방법이 있어야 한다는 것을 깨달았습니다. 이것이 environment.ts 파일을 사용하여 시도하고 수행하기로 결정한 것입니다.

구성 요소 개요

이 예에서는 사용할 수 있는 데모 카드 구성 요소를 만들어 보겠습니다. 부트스트랩 카드 스타일과 Tailwind 카드 스타일이 있는 HTML 템플릿 두 개를 만들 것입니다.

부트스트랩:

<!-- card-bootstrap.component.html -->
<div class="card" style="width: 18rem;">
  <img [src]="imageUrl" class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">{{ cardTitle }}</h5>
    <p class="card-text">{{ cardDescription }}</p>
    <a [routerLink]="url" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

순풍:

<!-- card-tailwind.component.html -->
<div class="p-20 bg-purple-100">
  <div class="bg-white rounded-lg shadow-lg w-full md:w-1/2">
    <img class="rounded-t-lg" [src]="imageUrl" alt="...">
    <div class="p-6">
      <h2 class="font-bold mb-2 text-2xl text-purple-800">{{ cardTitle }}</h2>
      <p class="text-purple-700 mb-2">{{ cardDescription }}</p>
      <a class="text-purple-600 underline text-sm hover:text-purple-500" [routerLink]="url">Go somewhere</a>
    </div>
  </div>
</div>

이제 두 개의 템플릿이 있으므로 구성 요소의 TypeScript 파일을 살펴보겠습니다.

// card.component.ts

@Component({
    selector: 'app-card',
    templateUrl: '',
    styleUrls: ['card.component.scss']
})
export class CardComponent {
    @Input() cardTitle: string;
    @Input() cardDescription: string;
    @Input() url: string;
    @Input() imageUrl: string;

    // other component logic
}

이제 이 예에서 나는 의도적으로 templateUrl 데코레이터를 공백으로 두었습니다. 일반적으로 값은 card.component.html 입니다. 그러나 구성 요소에는 위에서 만든 두 개의 템플릿이 있습니다. 다음으로 우리는 두 템플릿 파일 사이를 변경하는 한 가지 방법을 알아낼 것입니다.

템플릿 파일을 조건부로 변경

Angular를 사용한지 얼마나 되었는지에 따라 environment.ts 파일이 익숙하지 않을 수도 있고 익숙하지 않을 수도 있습니다. 이 파일은 Angular 애플리케이션을 빌드할 때 사용됩니다. Angular 앱에서 빌드 시간과 런타임 구성의 차이점에 대해 조금 더 읽을 수 있습니다. 간단히 말해서, environment.ts 파일의 값은 응용 프로그램 전체에서 사용할 수 있지만 값이 변경되면 변경 사항이 적용되도록 앱을 다시 빌드해야 합니다. CLI에서 Angular 앱을 생성할 때 기본적으로 로컬 개발에 사용되는 environment.ts 파일과 프로덕션 환경을 위해 앱을 빌드할 때 사용되는 environment.prod.ts 파일이 있습니다. 파일이 사용되는 시점은 angular.json 파일에서 결정됩니다.
environment.ts 파일이 무엇인지, 어떻게 사용하는지 간략하게 살펴보았으므로 시나리오에 사용하는 방법에 대해 알아보겠습니다. 이environment 파일을 사용하여 앱을 빌드할 때 앱에서 사용해야 하는 템플릿을 결정할 수 있다고 생각했습니다. useTailwindTemplate 와 같은 값을 파일에 추가한 경우 이를 사용하여 사용할 템플릿을 결정할 수 있습니다. 구성 요소의 TypeScript 파일을 다시 살펴보겠습니다.

// card.component.ts

import { environment } from 'src/environments/environment';

@Component({
    selector: 'app-card',
    templateUrl: environment.useTailwindTemplate ? 'card-tailwind.component.html' : 'card-bootstrap.component.html',
    styleUrls: ['card.component.scss']
})

이제 templateUrl 의 값은 environment 파일의 속성 값을 기반으로 설정됩니다. 테스트하려면 environment.useTailwindTemplate 속성을 true로 설정하여 애플리케이션을 빌드하고 브라우저에서 앱을 열 수 있습니다. 페이지에 Tailwind 카드가 표시되어야 합니다. 값을 false 로 설정하면 페이지에 부트스트랩 카드가 표시되어야 합니다.

결론

여기의 예는 단순하고 단순한 카드 구성 요소에 대해 잠재적으로 과도합니다. 그러나 구성 요소에 여러 구성 요소에서 반복하고 싶지 않은 복잡한 논리가 있다고 상상해 보십시오. 반복해야 하는 동일한 논리를 가진 여러 구성 요소가 있을 때마다 두 구성 요소는 빠르게 동기화되지 않습니다. 이러한 경우 좋은 옵션이 될 수 있습니다. 우리의 경우 이 옵션을 사용하여 한 앱에서 Tailwind를 사용하고 다른 앱에서 Bootstrap을 사용합니다. 또한 Bootstrap 앱을 Tailwind로 점진적으로 변환할 수 있습니다. 논리는 여러 템플릿을 사용할 수 있는 동안 단일 TypeScript 파일에 남아 있을 수 있습니다.

이는 구성 요소에 대한 템플릿 파일을 조건부로 교체할 수 있는 한 가지 방법일 뿐입니다. 다른 아이디어의 경우 .