재사용 가능한 각도 구성 요소 —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 1Option 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에서 찾을 수있는이 블로그 게시물의 두 번째 부분에서 설명합니다.

Suggested posts

Airtable을 사용한 강력한 제품 프로토 타이핑

Airtable을 사용한 강력한 제품 프로토 타이핑

HappyFunCorp에서 제품 설계자로서 저의 주된 책임은 고객이 적시에 올바른 것을 구축하도록하는 것입니다. 특히 스타트 업과 함께 일한다는 것은 예산을 지키면서 일을 처리 할 수있는 창의적인 방법을 찾는 것을 의미합니다.

6 B2B SaaS 리더가 제품 로드맵에 대한 반대 의견을 처리하는 방법

6 B2B SaaS 리더가 제품 로드맵에 대한 반대 의견을 처리하는 방법

불일치가 발생합니다. 어떻게 지나갈 수 있습니까? 작년에 저는 HelpScout, PracticalCX 및 Kustomer와 같은 회사의 제품 리더들과 고객 성공이 제품 로드맵에 어떤 영향을 미치는지, 그리고 이것이 제품의 "아기"가되어서는 안되는 이유에 대해 이야기했습니다. 서로 다른 팀은 서로 다른 관점을 가져 오며 모두 가치가있을 수 있습니다.

Related posts

"실용적인 프로그래머"의 5 가지 필수 사항

역대 베스트셀러 코딩 북의 요점

"실용적인 프로그래머"의 5 가지 필수 사항

Pragmatic Programmer는 1999 년에 처음 출판되었으며 이후 역대 최고의 프로그래밍 책으로 선정되었습니다. 저자 Andy Hunt와 David Thomas는 Agile Manifesto의 원저자 중 하나였으며 몇 가지 심각한 자격을 가지고 있습니다.

대규모 GraphQL 쿼리 공격으로부터 보호

공격자가 공개적으로 사용 가능한 GraphQL 인터페이스를 사용하여 사이트를 스크랩하거나 서비스 거부 공격을 실행하는 방법에 대해 알아보십시오. 이들은 4 가지 방법 중 하나로이를 수행 할 수 있습니다. 단일 대형 쿼리를 신중하게 구성하여 실행하고, 관련 데이터를 가져올 수있는 병렬 쿼리를 많이 작성하고, 일괄 요청을 사용하여 많은 쿼리를 연속적으로 실행하고, 마지막으로 많은 요청을 보냅니다.

기술 인터뷰의 사회적 구성 요소

코딩 문제는 스트레스가 많지만 스트레스에 대한 당신의 반응은 당신의 기술적 능력보다 더 크게 말합니다.

기술 인터뷰의 사회적 구성 요소

기술 업계의 직책을 위해 인터뷰 할 때 일반적으로 제안을 고려하기 전에 최소한 3 차례의 인터뷰를 거치게됩니다. 라운드는 일반적으로 다음과 같습니다. 그렇게 생각하면 잘못된 것입니다.

훌륭한 개발자의 3 가지 행동 특성

훌륭한 개발자의 3 가지 행동 특성

훌륭한 개발자를 만드는 비 기술적 인 것들 나는이 기사를 작성하는 것을 한동안 미루고 있습니다. 나는 그것을 작성할 자격이 있다고 생각하지 못했습니다. 오늘은 쓸 때라고 생각했습니다.