재사용 가능한 Angular 구성 요소 — Part II

이 부분에서는 구조적 지시문을 살펴보고이를 사용하여보다 일반적인 구성 요소를 구축하는 방법을 살펴 봅니다. 첫 번째 부분 에서는 재사용 가능한 구성 요소를 구축하기위한 다른 접근 방식에 대해 논의했습니다.

구조적 지침이란 무엇입니까?

구조적 지시문은 다른 지시문과 마찬가지로 정의되지만 한 가지 큰 차이점이 있습니다. 생성자에서 TemplateRef및 / 또는 ViewContainerRef 주입됩니다.

TemplateRef 구조적 지시문이 적용되는 요소의 투영 된 DOM 콘텐츠에 액세스 할 수있는 반면, ViewContainerRef 주어진 templateRef.

TemplateRef 및 / 또는 ViewContainerRef 생성자에 주입되는 즉시 지시문은 구조 지시문이됩니다.
이는 또한 지시어가 요소에 적용되는 방식을 변경합니다. 구조 지시어는 ng-templa 요소 에만 적용 할 수 있거나 별표 표기법을 사용해야합니다.

Asterix 표기법-* directiveName

ng-template 응용 프로그램에서 사용하지 않았을 수도 있지만 확실히 구조적 지시문을 사용했습니다. 구조적 지시문이 일반적으로 다른 방식으로 사용되기 때문입니다. 구문 상 설탕 각도는 별표 접두사가있는 구조적 지시문을 사용할 수 있습니다. 따라서 <ng-template appOption></ng-template짧은 별표 형식 을 작성 하는 대신 사용할 수 있습니다. <div *appOption></div>.
Under the hood angular는 다시 <ng-template *appOption></ng-template>양식 으로 변환합니다 .

표현

구조 ViewContainerRef의 템플릿은라는 템플릿을 렌더링하는 방법을 제공 하는를 사용하여 렌더링 할 수 있습니다 createEmbeddedView. 구조 지시어를 사용하여 구성 요소의 템플릿에서 템플릿을 렌더링 할 수도 있습니다 ngTemplateOutlet.

ngTemplateOutletTemplateRef렌더링 할 입력 매개 변수로를 예상합니다 .
간단히 말해서 이것이 ngTemplateOutlet 작동 방식입니다.

물론 소스 코드를 확인하면 그것보다 조금 더 복잡하지만 핵심 기능은 단지 렌더링하고 templateRef그것이 적용된 요소를 컨테이너로 사용하는 것입니다.

입력과 출력

지시문의 또 다른 주요 차이점은 구조 지시문에는 Outputs.

또한 Input매개 변수 는 일반 지시문과 다르게 작동합니다. 모두 Inputs 지시문 선택자 이름을 접두사로 붙여야합니다.

또한 Inputs속성이 될 수 없지만 표현식을 사용합니다. 위의 예에서 우리는 두 개의 Inputs.
그러나 <div *appOption="My text" appOptionOther="My Other text"></div> 작동하지 않습니다. 대신 우리는 표현 문법을 사용해야합니다.

구조 지시어의 표현 언어는 매우 강력하며 복잡한 작업을 수행 할 수 있습니다.

표현 문법

구조적 방향의 표현 문법을 사용하면 지시문의 매개 변수를 설정할 수있을뿐만 아니라 렌더링 될 때 컨텍스트라고하는 입력을받을 수도 있습니다.

Angular는 다음과 같은 문법을 지정합니다.

따라서 다음 입력이 유효합니다.

1 : * appOption = " '내 텍스트'"

이것은 문자열을 appOtionDirective. 반드시 문자열 일 필요는 없으며 다른 유형일 수도 있습니다. *ngIf예를 들어 부울을 표현식 입력으로 허용합니다. 지시문에서 표현식으로 작업하려면 입력으로 선언해야합니다. 그러나 구조적 지시문의 모든 입력에는 지시문 선택자 이름이 접두사로 지정되어야합니다.

2 : * appOption = "let i = index"

앞서 언급했듯이 표현 언어는 구조적 지시문에 대한 입력을 설정할 수있을뿐만 아니라 콘텐츠를 다시받을 수도 있습니다. 다시 수신 된 콘텐츠를 호출합니다 context.
. 컨텍스트는를 사용할 때 두 번째 매개 변수로 createEmbeddedView(templateRef, context)전달되거나 *ngTemplateOutlet<ng-content *ngTemplateOutlet="templateRef"; context:{}"></ng-content>
둘 다 사용할 때 컨텍스트 입력 으로 전달 될 수 있습니다.이 둘은 투영 된 콘텐츠에서 사용할 수있는 변수를 노출하는 선택적 컨텍스트 개체를 전달할 수 있습니다. 이 예제에서 구조적 지시문은 컨텍스트를 {index: 1}요소에서 전달하고 컨텍스트를 수신하여 변수 i에 매핑합니다 let i = index.

3 : * appOption = "let xyz, let i = index"

Angular는 또한 모든 콘텐츠를 수신하고이 경우 사용자 지정 변수 이름에 매핑 할 수 있습니다 xyz. 이것은 $implicit컨벤션 으로 이루어집니다 . 이름을 사용하여 컨텍스트에 설정된 콘텐츠 $implicit는 수신 측의 컨텍스트에 지정되지 않은 모든 변수에 매핑됩니다.

3b : * appOption = "let xyz, index as i"

기본적으로 as 표기법을 사용 하는 것만 위와 동일 합니다. index 에 할당되어 i템플릿에서 i. 이것은 독립적으로 작동하지 않기 때문에 조심해야합니다. *appOption="index as i" 오류가 발생합니다.

4 : * appOption = " '내 텍스트'; 색상 : '빨간색'; let xyz; let i = index"

첫 번째 예에서는 사용자 지정 텍스트가 지시문에 입력으로 전달됩니다. 이 예제는 키 표현식으로 지정된 두 번째 입력으로 확장됩니다. 색상 입력에 액세스하려면 지시문 선택자 이름을 접두사로 추가해야합니다. 그래서 color으로 사용할 수있게됩니다 appOptionColor.

5 : * appOption = "let xyz setItFrom [1, 2, 3]; let i = index"

이것은 기본적으로 *ngFor간단히 작동 하는 방식입니다. setItFrom 지시문 선택자 이름을 접두사로 붙여서 사용할 수 있습니다. 모든 옵션을 반복하고 삽입 된 .NET Framework를 통해 사용할 수있는 프로젝션 된 콘텐츠를 렌더링합니다 templateRef. 는 templateRef자신의 컨텍스트로 새로운 인스턴스가 각각 생성되는 청사진으로 볼 수있는 createEmbededView전화.

appOption에 대한 구조적 지시문 사용

이제 구조적 지시문에 대한 기본적인 이해를 얻었으므로 그 지식을 사용하여 원래 appOptionsButton 문제 에 적용 할 수 있습니다 .
구조적 지시문을 사용하면 적용되는 요소의 투영 된 DOM 콘텐츠에 액세스 할 수 있습니다. 이것을 사용하여 templateRef부모 에 등록 할 수 있습니다 appOptionsComponent.

부모 컴포넌트 registerOption 에서 템플릿을 받아들이고 등록 된 옵션 템플릿의 렌더링을 처리하도록 메서드 를 조정해야합니다 . 템플릿을 통해 우리 반복 처리를 등록 templateRef 하고 사용하여 그들의 각 하나를 렌더링 *ngTemplateOutlet.

이제 우리는 우리가 찾고 있던 모든 기능과 유연성을 갖게되었습니다.

우리가 배운 모든 것으로 확장

appOptionsButton 배운 모든 것을 적용하기 위해 더 많은 입력으로를 확장 할 수 있습니다 .

제품 관리에서 다음과 같은 요구 사항이 있다고 가정 해 보겠습니다.

  • 일부 옵션에는 색상이 있습니다.
  • 각 항목은 증가하는 숫자로 시작해야합니다.
  • 백엔드에서 Array<{label: string, icon: string}>.

작은 연습으로 혼자서 요구 사항을 구현하거나 솔루션으로 바로 이동할 수 있습니다.

해결책

Suggested posts

Angular vs React vs Vue : 장점, 단점 및 사용시기

Angular vs React vs Vue : 장점, 단점 및 사용시기

프로그래밍 세계 Vue에서 Angular, React 및 상대적인 참신함 (2014)을 통합하는 것은 무엇입니까? 첫째, 이들 모두는 JavaScript로 작업을 단순화하고 프런트 엔드 문제를 해결하기위한 것입니다. 둘째, 이러한 각 도구를 범용이라고 부르지 만 그럼에도 불구하고 특정 디지털 제품 개발을 위해 설계되었습니다.

신뢰의 속도로 이동 : 제품 팀을 조정하는 방법

신뢰의 속도로 이동 : 제품 팀을 조정하는 방법

소개 제품 팀은 신뢰의 속도로 움직이고, 사람들이 서로에게서 기대할 수있는 것과 그들에게 기대되는 것을 알고있을 때만 신뢰를 구축 할 수 있습니다. 정렬이 없으면 제품 팀은 잘못된 시작, 지연 및 내분을 경험합니다.