Angular Directives 사용 및 생성에 대한 실용 가이드

Angular Directives 사용 및 생성에 대한 실용 가이드 - SitePoint 이 기사는 각도 지시에 중점을 둡니다. 지시문은 아마도 각도 적용의 가장 중요한 비트 일 것입니다. 우리가 그것에 대해 생각한다면, 가장 많이 사용되는 각도 단위 인 구성 요소는 실제로 지시입니다.

. 각도 구성 요소는 템플릿이있는 지침에 지나지 않습니다. 구성 요소가 각도 응용 분야의 빌딩 블록이라고 말할 때 실제로 지시문은 각도 응용 분야의 빌딩 블록이라고 말합니다. 키 테이크 아웃

각도 지침은 각도 응용 분야의 중요한 부분으로, HTML의 힘을 새로운 구문으로 확장합니다. 그들은 각도 컴파일러가 DOM에서 찾을 때마다 실행되는 기능이며 요소, 속성, 클래스 또는 주석에 사용할 수 있습니다.

. 각도 지침은 구성 요소, 속성 지시문 및 구조 지침의 세 가지 유형으로 분리됩니다. 구성 요소는 템플릿이있는 지침이며, 속성 지시문은 동작과 외관을 변경하여 DOM을 조작하며, 구조 지시문은 DOM 요소를 생성하고 파괴하는 데 사용됩니다. Angular Directives는 ng-repeat와 같이 사전 정의되거나 맞춤 제작 될 수 있습니다. 사용자 정의 지시서를 작성하면 @Angular/Core에서 지침을 가져오고 지침 클래스를 정의하고 NGModule의 선언에 추가하는 것이 포함됩니다. 당면한 작업에 적합한 유형의 지침을 선택하는 것이 중요합니다. DOM이 보이지 않을 때 요소가 여전히 유용한 경우 속성 지시문을 사용해야합니다. 요소가 사용되지 않으면 구조 지침을 사용하여 제거해야합니다. 그러나 DOM이 지나치게 복잡하거나 부정적인 영향을 미치지 않도록주의를 기울여야합니다.

기본 개요 핵심에서, 지침은 각도 컴파일러가 DOM에서 찾을 때마다 실행되는 함수입니다. Angular Directives는 새로운 구문을 제공하여 HTML의 전력을 확장하는 데 사용됩니다. 각 지시문에는 NG-Repeat와 같이 미리 정의 된 각도의 이름 또는 무엇이든 호출 할 수있는 사용자 정의 이름이 있습니다. 그리고 각 지시문은 사용할 수있는 위치를 결정합니다. 요소, 속성, 클래스 또는 댓글에서. 기본적으로 각도 버전 2 및 이후의 각도 지시문은 세 가지 유형으로 분리됩니다. 구성 요소

앞에서 본 것처럼 구성 요소는 단지 템플릿이있는 지침 일뿐입니다. 후드 아래에서, 그들은 지침 API를 사용하고 우리에게 그것들을 정의 할 수있는 더 깨끗한 방법을 제공합니다. 다른 두 지침 유형에는 템플릿이 없습니다. 대신, 그들은 특히 Dom 조작에 맞게 조정됩니다.

속성 지시문 속성 지시문은 동작과 외관을 변경하여 DOM을 조작합니다.

우리는 속성 지시문을 사용하여 조건부 스타일을 요소에 적용하거나 요소를 보여 주거나 숨기거나 변화하는 속성에 따라 구성 요소의 동작을 동적으로 변경합니다. 구조 지침 이들은 DOM 요소를 생성하고 파괴하기 위해 특별히 맞춤화되어 있습니다.

hidden과 같은 일부 속성 지시문은 요소를 보여 주거나 숨어 있습니다. 기본적으로 DOM을 그대로 유지합니다. 그러나 구조적 각도 지침은 DOM에서 요소를 추가하거나 완전히 제거하기 때문에 DOM 친화적이지 않습니다. 따라서 이것을 사용할 때는 실제로 HTML 구조를 변경하고 있기 때문에 더욱주의를 기울여야합니다.

기존 각도 지시를 사용하는 기존 지침을 앵글에서 사용하는 것은 매우 쉽고 과거에 Angular 응용 프로그램을 작성한 경우 사용했다고 확신합니다. NGClass 지시문은 기존 각도 속성 지시문의 좋은 예입니다.

따라서 아래 예제에 ngclass 지시문을 사용하여 실제로 파란색 클래스를 단락에 추가하고 노란색을 추가하지 않습니다. 클래스의 모양을 변경하고 실제 HTML 구조를 변경하지 않기 때문에 이는 분명히 속성 지시문입니다. 그러나 Angular는 또한 NGIF :

와 같은 기본 구조 지시문을 제공합니다.

이 예에서는 NGIF 지시문을 사용하여 버튼을 사용하여 텍스트를 추가하거나 제거합니다. 이 경우 HTML 구조 자체가 영향을 받으므로 구조적 지침입니다.

. 사용 가능한 각도 지시문의 전체 목록은 공식 문서를 확인할 수 있습니다. 우리가 본 바와 같이, 각도 지침을 사용하는 것은 매우 간단합니다. 각도 지시의 진정한 힘은 우리 자신을 만들 수있는 능력이 있습니다. Angular는 사용자 정의 지시문을 만들기위한 깨끗하고 간단한 API를 제공하며 이것이 다음 섹션에서 볼 수있는 것입니다. 속성 지시문 생성 지시서를 만드는 것은 구성 요소를 만드는 것과 유사합니다. 그러나이 경우 @Directive Decorator를 사용합니다. 이 예에서는 오류를 나타내는 요소의 배경을 빨간색으로 강조 표시되는 "My-Error-Directive"라는 지침을 작성합니다. 이 예에서는 Angular 2 QuickStart 패키지를 사용합니다. 저장소를 복제 한 다음 NPM 설치 및 NPM 시작을 실행해야합니다. 실험에 사용할 수있는 보일러 플레이트 앱을 제공합니다. 우리는 해당 보일러 플레이트 위에 예제를 만들 것입니다.

src/앱 폴더에서 app.myerrordirective.ts라는 파일을 만들고 다음 코드를 추가하여 시작하겠습니다.

@Angular/Core에서 지침을 가져 오면 사용할 수 있습니다. 먼저, 우리는 지침에 이름을 부여하는 선택기가 필요합니다. 이 경우, 우리는 그것을 내 주로라고 부릅니다. 모범 사례는 각도 지침을 지시 할 때 항상 접두사를 사용하도록 지시합니다. 이런 식으로 표준 HTML 속성과의 충돌을 피해야합니다. 또한 NG 접두사를 사용해서는 안됩니다. 그것은 Angular에 의해 사용되었으며, 우리는 우리의 맞춤형 각도 지침을 각도의 사전 정의 된 각도 지침과 혼동하고 싶지 않습니다. 이 예에서 우리의 접두사는 내-.

입니다 그런 다음 우리는 수업을 만들었습니다. DOM의 모든 요소에 액세스하려면 ElementRef를 사용해야합니다. 또한 @Angular/Core 패키지에 속하므로 지침과 함께 가져 와서 사용하는 간단한 문제입니다. 그런 다음 우리는 클래스의 생성자를 실제로 강조하기 위해 코드를 추가했습니다.

이 새로 작성된이 지침을 사용할 수 있으려면 app.module.ts 파일의 선언에 추가해야합니다.

마지막으로, 우리는 방금 만든 지침을 사용하고 싶습니다. 이렇게하려면 app.component.ts 파일로 이동하여 다음을 추가하겠습니다.

최종 결과는 이것과 비슷해 보입니다

구조 지침 생성

이전 섹션에서는 Angular를 사용하여 속성 지시문을 만드는 방법을 보았습니다. 구조적 행동을 만드는 접근 방식은 정확히 동일합니다. 우리는 지침을위한 코드와 함께 새 파일을 만든 다음 선언에 추가하고 마지막으로 구성 요소에 사용합니다. 구조 지침의 경우 NGIF 지침 사본을 구현할 것입니다. 이런 식으로, 우리는 지침을 구현할뿐만 아니라 각도 지시문이 무대 뒤에서 물건을 어떻게 처리하는지 살펴볼 것입니다.

. app.mycustomifdirectic.ts 파일부터 시작하겠습니다

우리가 볼 수 있듯이, 우리는 주로 입력, templateref 및 viewContainerRef와 같은 몇 가지 가져 오기를 사용하고 있습니다. 입력 데코레이터는 데이터를 구성 요소로 전달하는 데 사용됩니다. Templateref One은 임베디드 뷰를 인스턴스화하는 데 사용됩니다. 내장보기는 렌더링 할 레이아웃의 일부를 나타내며 템플릿에 연결됩니다. 마지막으로, ViewContainerRef는 하나 이상의 뷰를 첨부 할 수있는 컨테이너입니다. 이 구성 요소는 함께 다음과 같이 작동합니다

<span><span><span><p</span> [ngClass]<span>="{'blue'=true, 'yellow'=false}"</span>></span>
</span>    Angular Directives Are Cool!
<span><span><span></p</span>></span>
</span>
<span><span><span><style</span>></span><span>
</span></span><span><span>    <span><span>.blue</span>{color: blue}
</span></span></span><span><span>    <span><span>.yellow</span>{color: yellow}
</span></span></span><span><span></span><span><span></style</span>></span>
</span>

로그인 후 복사

지시문은 ViewContainerRef를 주입하여 뷰 컨테이너에 액세스 할 수 있습니다. 내장 뷰는 ViewContainerRef의 CreateEmbedDedView 메소드를 호출하고 템플릿을 전달하여 View Container에 생성 및 연결됩니다. 우리는 템플릿을 사용하여 지침이 첨부되어 주입 된 templateref를 통과합니다. - range.io의 각도 2 훈련에서

에서

@Component({
  selector: 'ng-if-simple',
  template: `
    <span><span><span><button</span> (click)<span>="show = !show"</span>></span>{{show ? 'hide' : 'show'}}<span><span></button</span>></span>
</span>    show = {{show}}
    <span><span><span><br</span>></span>
</span>    <span><span><span><div</span> *ngIf<span>="show"</span>></span>Text to show<span><span></div</span>></span>
</span>`
})

class NgIfSimple {
  show: boolean = true;
}

로그인 후 복사

다음으로 우리는 선언자에 추가합니다 :

그리고 우리는 구성 요소에서 사용합니다 :

<span><span><span><p</span> [ngClass]<span>="{'blue'=true, 'yellow'=false}"</span>></span>
</span>    Angular Directives Are Cool!
<span><span><span></p</span>></span>
</span>
<span><span><span><style</span>></span><span>
</span></span><span><span>    <span><span>.blue</span>{color: blue}
</span></span></span><span><span>    <span><span>.yellow</span>{color: yellow}
</span></span></span><span><span></span><span><span></style</span>></span>
</span>

로그인 후 복사

구조 지침에 의해 제공되는 접근 방식은 권한에 따라 사용자를 위해 다른 정보를 보여 주어야 할 때와 같이 매우 유용 할 수 있습니다. 예를 들어, 사이트 관리자는 모든 것을보고 편집 할 수 있어야하지만 일반 사용자는해서는 안됩니다. 속성 지시문을 사용하여 개인 정보를 DOM에로드 한 경우 해당 문제에 대한 일반 사용자와 모든 사용자가 액세스 할 수 있습니다. 각도 지시 사항 : 속성 대 구조

우리는 속성 및 구조 지시문을 살펴 보았습니다. 그러나 언제 하나 또는 다른 하나를 사용해야합니까? 답은 혼란 스러울 수 있으며 우리는 문제를 해결하기 때문에 잘못된 것을 사용하게 될 수 있습니다. 그러나 올바른 것을 선택하는 데 도움이되는 간단한 규칙이 있습니다. 기본적으로 DOM이 보이지 않을 때 지시 사항이있는 요소가 DOM에서 여전히 유용 할 경우, 우리는 확실히 보관해야합니다. 이 경우 Hidden과 같은 속성 지시문을 사용합니다. 그러나 요소가 사용되지 않으면 제거해야합니다. 그러나 우리는 일반적인 함정을 피하기 위해주의해야합니다. 우리는 요소가 더 쉬워지기 때문에 항상 숨는 요소의 함정을 피해야합니다. 이것은 DOM을 훨씬 더 복잡하게 만들고 아마도 전반적인 성능에 영향을 미칠 것입니다. 요소를 항상 제거하고 재현하는 함정도 피해야합니다. 확실히 깨끗하지만 성능을 희생합니다.

이상적인 솔루션은 항상 애플리케이션 구조, 행동 및 성능에 전반적인 영향을 미치는 솔루션이기 때문에 각 사례를 신중하게 분석해야합니다. 이 솔루션은 속성 지시서, 구조 지침이거나 가장 일반적인 시나리오에서 두 가지 사이의 타협 일 수 있습니다.

결론 이 기사에서는 각도 응용 분야의 핵심 인 Angular Directives를 살펴 보았습니다. 우리는 다양한 유형의 지침을보고 우리의 요구에 맞는 맞춤형을 만드는 방법을 보았습니다.

나는이 기사가 당신을 각도 지시문으로 만들고 달리게 할 수 있기를 바랍니다. 질문이 있으시면 아래의 의견 섹션을 자유롭게 사용하십시오.

각도 지시에 대한 질문 (FAQS) 다른 유형의 각도 지시문은 무엇입니까?

각도 지시문은 구성 요소 지침, 속성 지시문 및 구조 지침의 세 가지 유형으로 분류됩니다. 이름에서 알 수 있듯이 구성 요소 지시문은 템플릿이있는 지침입니다. 그들은 본질적으로 각도 구성 요소입니다. 속성 지시문은 DOM 요소의 동작, 외관 및 느낌을 변경하는 데 사용됩니다. 반면에 구조 지침은 DOM의 요소를 추가, 제거 또는 교체하여 DOM 레이아웃을 조작하는 데 사용됩니다. angular에서 사용자 정의 지침을 만드는 방법?

각도에서 사용자 정의 지시 사항을 만드는 데 몇 단계가 포함됩니다. 먼저 각도 코어에서 지침 데코레이터를 가져와야합니다. 그런 다음 지침 클래스를 정의하고 @Directive 데코레이터로 장식해야합니다. 데코레이터의 선택기 속성은 지침에 사용하려는 이름과 일치해야합니다. 마지막으로, 당신은 당신의 ngmodule의 선언 배열에 지시문을 추가해야합니다.

angular에서 내장 지시문을 어떻게 사용합니까?

Angular는 당신이 사용할 수있는 몇 가지 내장 지시문을 제공합니다. 템플릿에서. 예를 들어, *ngif 지시문을 사용하여 조건부 렌더링 요소 또는 *ngfor 지침을 사용하여 항목 목록을 렌더링 할 수 있습니다. 이 지시문을 사용하려면 적절한 구문으로 템플릿에 추가합니다.

각도의 지침과 구성 요소의 차이점은 무엇입니까?

각도에서 구성 요소는 유형입니다. 템플릿이 있고 특정보기에 연결된 지침. 반면에 지침은 DOM의 요소에 동작을 추가하는 방법입니다. 구성 요소는 UI 위젯을 생성하는 데 사용되는 반면, 지침은 기존 요소에 동작을 추가하는 데 사용됩니다.

각도 지시서에서 데이터 바인딩을 수행 할 수있는 각도의 지침에 데이터를 바인딩하는 방법 여러 가지 방법으로. 일반적인 방법 중 하나는 속성 바인딩을 통한 것입니다. 여기서 DOM 요소의 속성을 구성 요소의 속성에 바인딩합니다. 또한 이벤트 바인딩을 사용하여 사용자 작업에 응답하거나 양방향 바인딩을 사용하여 모델과보기를 동기로 유지할 수 있습니다.

angular에서 지시문을 테스트하는 방법

지침 테스트 Angular에서는 지침을 사용하는 테스트 구성 요소를 작성한 다음 해당 구성 요소를 테스트하는 것이 포함됩니다. 테스트 베드 유틸리티를 사용하여 동적 테스트 구성 요소를 생성 한 다음 ComponentFixture를 사용하여 구성 요소 및 해당 지침과 상호 작용할 수 있습니다.

angular의 단일 요소에서 여러 지침을 사용할 수 있습니까?

예, Angular의 단일 요소에서 여러 지시문을 사용할 수 있습니다. 그러나 지침이 적용되는 순서가 최종 결과에 영향을 줄 수 있음을 알고 있어야합니다. Angular는 템플릿에 나열된 순서대로 지시문을 적용하므로 적용하려는 순서대로 지시문을 나열해야합니다.

angular의 지시문으로 매개 변수를 전달하는 방법

@Input 데코레이터를 사용하여 매개 변수를 각도의 지침으로 전달할 수 있습니다. 이를 통해 지침의 속성을 구성 요소의 값에 바인딩 할 수 있습니다. 그런 다음 지시서 내부 의이 값을 사용하여 동작을 제어 할 수 있습니다.

angular에서 공유 지시문을 만드는 방법

angular에서 공유 지시문을 만들려면 지침을 정의해야합니다. 공유 모듈에서. 그런 다음이 공유 모듈을 지침을 사용하려는 다른 모듈로 가져올 수 있습니다. 이를 통해 여러 구성 요소 또는 모듈에서 동일한 지침을 재사용 할 수 있습니다. angular에서 지침을 디버깅하는 방법은 무엇입니까?