재사용 가능한 각도 구성 요소 —1 부

이 블로그 게시물은 간단한 예제를 통해 재사용 가능한 구성 요소를 빌드하는 다양한 접근 방식을 보여줍니다. 이것은 두 부분으로 된 블로그 게시물입니다. 두 번째 부분에서는 더욱 발전하고 있으며 구조적 지시문을 활용하여 간단한 인터페이스로 재사용 가능한 옵션 버튼 구성 요소를 구축하는 방법을 살펴 봅니다.

확장 가능한 웹 애플리케이션을 구축하는 데있어 중요한 부분은 재사용 가능한 구성 요소의 도구 상자를 만드는 것입니다.
그러나 재사용 가능한 구성 요소를 만드는 것은 다른 요구 사항에 맞아야 할 수 있기 때문에 항상 쉬운 것은 아닙니다.

구성 요소가 유연할수록 더 많은 요구 사항을 지원할 수 있습니다. 물론, 기존 컴포넌트를 새로운 기능으로 확장하기 전에 항상 그 기능이 해당 컴포넌트에 적합한 지 아니면 그 자체로 새로운 컴포넌트가 될지 항상 생각해야합니다.

더 나은 이해를 위해 다음 예제를 살펴 보겠습니다.

제품 관리에서는 기본 브라우저 버튼을 맞춤 설계된 버튼으로 교체하도록 요청하고 있습니다.
그래서 계속해서 네이티브 버튼을 감싸고 스타일을 재정의하는 버튼 구성 요소를 만듭니다.
버튼 텍스트에 대한 구성 요소 입력을 제공하므로 외부에서 구성 할 수 있습니다.

이제 제품 관리가 다시 돌아와서 특정 뷰의 버튼 스타일을 빨간색으로 지정하도록 요청합니다.
다른 모든보기에서는 파란색으로 유지됩니다. 이 요구 사항을 충족하기 위해 컴포넌트로 돌아가서 버튼의 색상을 구성하는 선택적 컴포넌트 입력으로 확장합니다.

며칠 후 디자인 팀의 새로운 요청이 우리 책상에서 기다리고 있습니다. 그들은 버튼 아이콘을 원합니다. 다시 버튼 구성 요소로 이동하여 아이콘을 구성하기 위해 새 입력으로 확장합니다.
현재 발생하는 유일한 문제는 새로운 요구 사항이있을 때마다 인터페이스가 점점 더 커지고 있다는 것입니다.

<app-button text="Say hello" 
            icon="sun" 
            color="blue">
</app-button>

구성 요소의 인터페이스를 정리했을뿐만 아니라 구성 요소를 사용할 수있는 더 많은 유연성도 제공했습니다.
우리는하지 않은 상상 fontawesome 아이콘을 제공뿐만 아니라 같은 두 번째 아이콘 공급자로 icomoon .
함께 ng-content이 공급자를 전환하는 매우 쉽게, 우리는 단지 대체 <i class=fas fa-sun</i>우리가 원하는 아이콘. 이것은 이전 접근 방식에서는 가능하지 않습니다.

Ng 함량

ng-content콘텐츠 투영에 사용되며 외부에서 투영 된 콘텐츠를 구성 요소로 렌더링합니다. 따라서 구성 요소를 사용할 수있는 방법을보다 유연하게 할 수 있습니다.

<app-button>
  Projected content that is rendered by ng-content
</app-button>

• 컴포넌트에서 지원되는 요소를 지정합니다.
• 요소가 배치되는 순서를 지정합니다 (아이콘은 항상 텍스트 앞에 있음).

더 복잡한 구성 요소

제품 관리는 다른 작업이있는 옵션 버튼을 원합니다. 옵션은 작업이 다른 여러 장소에서 사용되어야합니다.

라는 새 구성 요소를 만드는 것으로 시작합니다 OptionsButton. 사용을 단순화하기 위해 Angular 머티리얼 디자인에서matMenu 제공합니다 .

첫 번째 버전에서는 하드 코딩 된 옵션을 제공합니다.

그러면 Option 1 및 Option 2 옵션 이있는 클릭시 팝업을 여는 버튼이 나타납니다 . 구성 요소 자체는 옵션에 대한 텍스트를 정의 할 수없고 사용자가 항목을 클릭 할 때 발생할 일을 정의 할 수 없기 때문에 매우 쓸모가 없습니다.

따라서 다음 단계에서 이러한 버튼을 구성 가능하게 만듭니다. optionsInput 라는 필드를 추가합니다 . 템플릿 에서 옵션을 렌더링하기 위해 배열을 반복 합니다.
ngFor

구성 요소는 다음과 같이 사용됩니다.

배열 접근 방식은 매우 유연하지 않으며 콜백을 지정하는 방법에도주의해야합니다. 콜백이 지정 {text: ‘Option 1’, callback: alert()되면 사용자가 옵션을 클릭 할 때 대신 콜백이 즉시 호출됩니다.

조건이 참일 때만 작업을 표시하려면 옵션 배열을 수정해야합니다. 더 선호되는 접근 방식은 템플릿에서 *ngIf.

부품 등록

Angular Dependency Injection을 사용하면 상위 구성 요소의 컨트롤러를 구성 요소에 삽입 할 수 있습니다. 이를 통해 자식 구성 요소에서 부모 구성 요소에 액세스 할 수 있습니다. 이를 활용하고 옵션을 새 구성 요소로 제공 한 다음 appOptionsComponent. 템플릿은 다음과 같습니다.

라는 새 구성 요소를 만듭니다 appOption. 이 구성 요소는 텍스트 구성을 허용하고 execute사용자가 옵션을 클릭 할 때 트리거되는 출력 도 제공합니다 .

생성자에서 우리는 OptionsParentDirective.
Angular는 .NET Framework를 찾을 때까지 DOM 트리의 모든 부모 요소를 탐색하여 문제를 해결합니다 OptionsButtoncomponent. 발견되면에서 사용할 수있게됩니다. AppOptioncomponent그렇지 않으면 오류가 발생합니다.

에서 ngOnInit방법 우리는 다음 옵션을 등록합니다. 콜백로서 우리는
우리의 포장 EventEmitter콜백은 (는) 이벤트 이미 터에 위임됩니다 호출하여 때마다. 에서는 ngOnDestroy 부모로부터 옵션 등록을 취소해야합니다.

및 메서드를 OptionsButtonComponent 사용하여 확장합니다 . 이 접근 방식의 한 가지 좋은 점은 구성 요소 옵션 입력을 사용하여 여전히 옵션을 등록 할 수 있다는 것입니다. 그래서 우리는 대체하는 대신 애드온을 만들었습니다.registerunRegister

옵션 구성 요소를 지시문으로 리팩터링

우리가 따라 AppOptionButton 둘 템플릿이나 연관된 스타일과 순수한 목적은 상위 구성 요소에 자신을 등록하고이 없다, 대신 구성 요소의 지시어로 사용하는 것이 더 의미가 있습니다. 그래서 우리는 우리를 조정하고 AppOptionComponent그것을 AppOptionDirective.

또한, 우리의 우리가 대신 사용했던 부분을 조정해야 <app-option></appOption> 우리가 같이 사용할 필요를 <div appOption></div>.

첫 번째 버튼 예제와 마찬가지로 입력 접근 방식은 어느 시점에서 매우 유연하지 않게되며 오히려 ng-content접근 방식을 사용합니다 . 우리는 다음과 같은 것을 달성하고 싶습니다.

모든 옵션 ng-content 에 대해 appOptionsComponent 를 사용하면 각 옵션이의 구조로 래핑되어야하므로 작동하지 않습니다 matMenuItem.

다행스럽게도 Angular는 그 문제에 대한 해결책을 제공하고이를 구조적 지시자라고 부릅니다.

이에 대해서는 https://zarlex./re-usable-angular-components-part-ii-c4db1da57244에서 찾을 수있는이 블로그 게시물의 두 번째 부분에서 설명합니다.