컴포넌트와 디렉티브의 차이점은 무엇입니까?

답변:

107

기본적으로 문서에 따라 Angular2에는 세 가지 유형의 지시문이 있습니다.

  • 구성 요소
  • 구조적 지시문
  • 속성 지시문

구성 요소

또한 Angular2에서 가장 유명한 디렉티브 유형 인 템플릿, 스타일, 로직 부분이 포함 된 디렉티브 유형입니다. 이 유형의 지시문에서 @Component다음과 같이 주석 에 사용자 정의 또는 내장 지시문을 사용할 수 있습니다 .

@Component({
    selector: "my-app"
    directives: [custom_directive_here]
})

보기에서이 지시문을 다음과 같이 사용하십시오.

<my-app></my-app>

구성 요소 지시문의 경우 여기 에서 최고의 자습서를 찾았 습니다.

구조적 지시문

추천 *ngFor하고 *ngIf, DOM 요소를 추가 및 제거하여 DOM 레이아웃을 변경하기 위해 사용된다. 여기에 설명

속성 지시문

일부 기능 / 로직을 적용하여 기존 요소에 사용자 정의 동작 또는 스타일을 부여하는 데 사용됩니다. Like ngStyle는 요소에 동적으로 스타일을 부여하는 속성 지시문입니다. 우리는 우리 자신의 지시문을 만들고 이것을 미리 정의 된 요소 나 사용자 정의 요소의 속성으로 사용할 수 있습니다. 다음은 간단한 지시문의 예입니다.

먼저 지시문을 가져와야합니다. @angular/core

import {Directive, ElementRef, Renderer, Input} from '@angular/core';

@Directive({
  selector: '[Icheck]',
})
export class RadioCheckbox {
   // custom logic here...
}

아래와 같이 뷰에서 사용할 수 있습니다.

<span Icheck>HEllo Directive</span>

자세한 정보는 여기 와 여기 에서 공식 튜토리얼을 읽을 수 있습니다.

— 파딥자인
소스
"라우터 콘센트"지침은 어떤 종류입니까? 위의 세 가지 유형 중 IMO와 일치하지 않습니다.
— user2516186 apr
1
여기에 좋은 튜토리얼이 있습니다. dev6.com/angular/angular-2-the-three-types-of-directives
— Flames
64

구성 요소에는 고유 한보기 (HTML 및 스타일)가 있습니다. 지시문은 기존 요소 및 구성 요소에 추가 된 "동작"일뿐입니다.
Component확장 Directive합니다.

이 때문에 호스트 요소에는 하나의 구성 요소 만있을 수 있지만 지시문은 여러 개입니다.

구조적 지시문은 <template>요소에 적용되는 지시문이며 콘텐츠를 추가 / 제거하는 데 사용됩니다 (템플릿 스탬프). *같은 지시어 애플리케이션은 *ngIf원인이 <template>태그를 암시 적으로 생성 할 수 있습니다.

— Günter Zöchbauer
소스
7

Günter가 말한 것을 완료하기 위해 두 가지 종류의 지시문을 구분할 수 있습니다.

  • 구조들 추가하거나 요소를 제거하여 DOM 레이아웃을 업데이트합니다. 두 가지 일반적인 것은 NgFor및 NgIf입니다. 이러한 항목은 템플릿 개념에 연결되며 *. 자세한 내용은이 링크의 "템플릿 및 *"섹션을 참조하십시오. http://victorsavkin.com/post/119943127151/angular-2-template-syntax
  • 속성들 그들이 하나를 부착 요소의 모양의 동작을 업데이트합니다.

도움이 되었기를 바랍니다, Thierry

— 티에리 템플 리에
소스
2
속성 지시문의 목적을 보지 마십시오. CSS 외에 무엇을 제공합니까?
— Tim McNamara
3
@TimMcNamara, Angular 지시문은 로직 / 메소드를 가질 수 있으므로 CSS만으로 할 수있는 것보다 속성 지시문으로 더 많은 일을 할 수 있습니다. 일부 부모 속성 값을 특성 지시문에 전달하고 해당 속성 값에 따라 요소가 다르게 나타나거나 동작하도록 할 수 있습니다.
— Mark Rajcok
좋은 예는 여기에서 찾을 수 있습니다 : angular.io/docs/ts/latest/guide/attribute-directives.html
— Joris Brauns
6

실제 정의는 다음과 같습니다.

  • 그것은이있는 경우 템플릿을 , 그것은이다 구성 요소
  • 그렇지 않으면 대괄호 "[likethis]" 안에 선택자가 있으면 속성 지시문입니다.
  • 그렇지 않으면 구조적 지침 입니다.

다른 정의는 잘못되었습니다.

— 존 헨켈
소스
당신은 그들이 무엇인지가 아니라 그들의 발생을 정의하고 있습니다.
— imrok
3

요약:

컴포넌트는 연관된 뷰 (예 : 렌더링 할 HTML)가있는 지시문입니다. 모든 구성 요소는 지시문이지만 모든 지시문이 구성 요소는 아닙니다. 지시문에는 세 가지 유형이 있습니다.

  • 구성 요소 : 관련 동작이있는보기입니다. 이 유형의 지시문은 실제로 DOM 요소를 추가합니다.
  • 속성 지시문 : 요소의 모양이나 동작을 수정하기 위해 DOM 요소 (및 DOM 요소이므로 구성 요소)에 연결할 수 있습니다.
  • 구조적 지시문 : DOM 레이아웃을 수정하기 위해 DOM 요소 (및 DOM 요소이므로 구성 요소)에 연결할 수 있습니다. 구조적 지시문은 *로 시작하고 실제로 DOM 요소를 추가하거나 제거합니다. 예를 들어 *ngIfDOM 요소 (또는 사용자 정의 DOM 요소이지만 여전히 DOM 요소 인 각도 구성 요소)를 삽입하거나 제거 할 수 있습니다.

예:

import { Component, HostListener, HostBinding, Directive, ElementRef } from '@angular/core';

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
  constructor(el: ElementRef) {
    el.nativeElement.style.backgroundColor = 'yellow';
 }
}

@Component({
  selector: 'app-root',
  template: `
    <div *ngIf='myBool' appHighlight>Hi there</div>
  `,
  styleUrls: ['./app.component.scss'],
})
export class AppComponent  {

  myBool:boolean = true;

}

위의 예에서 다음을 관찰 할 수 있습니다.

  • 구성 요소 AppComponent에는 <div>여기에 표시 되는 요소 가있는 템플릿 이 있습니다.
  • 속성 지시문 HighlightDirective는 <div>요소에 있습니다. 즉, <div>요소 의 동작을 조작합니다 . 이 경우 텍스트가 강조 표시되고 노란색으로 바뀝니다.
  • 구조 지시문 *ngIf도 <div>요소 에 있으며 요소를 삽입할지 여부를 결정합니다. 는 <div>조건부 표현이 있는지 여부에 따라 표시됩니다 myBool강제 변환 할 수 있습니다 true.
— 빌렘 반 데르 빈
소스
2

Angular 2는 아키텍처의 구성 요소 / 서비스 모델을 따릅니다.

각도 2 응용 프로그램은 구성 요소로 구성됩니다. 구성 요소는 HTML 템플릿과 화면의 일부를 제어하는 ​​구성 요소 클래스 (타입 스크립트 클래스)의 조합입니다.

모범 사례를 위해 구성 요소 클래스는 각 뷰에 대한 데이터 바인딩에 사용됩니다. 양방향 데이터 바인딩은 각도 프레임 워크에서 제공하는 훌륭한 기능입니다.

제공된 선택기 이름을 사용하여 응용 프로그램에서 구성 요소를 재사용 할 수 있습니다.

구성 요소는 템플릿이있는 일종의 지시문이기도합니다.

다른 두 가지 지침은 다음과 같습니다.

  1. 구조적 지시문-DOM 요소를 추가 및 제거하여 DOM 레이아웃을 변경합니다. 예 : NgFor및 NgIf.

  2. 속성 지시문-요소, 구성 요소 또는 다른 지시문의 모양이나 동작을 변경합니다. 전의: NgStyle

— 말라 테시 파틸
소스
0

실제로 구성 요소도 지시문이지만 차이점이 있습니다.

속성 지시어 :

속성 지시문은 단일 요소의 동작이나 모양을 수정할 수있는 클래스입니다. 속성 지시문을 생성하려면 @Directive을 클래스에 적용하십시오 .

import { Directive, ElementRef } from "@angular/core";

@Directive({
     selector: "[custom-attr]", })

export class CustomAttrDirective {

   constructor(element: ElementRef) {
      element.nativeElement.classList.add("bg-success", "text-white");    
   } 
}

지시어 속성 template.html 파일 추가

<tr *ngFor="let item of getProducts(); let i = index" custom-attr>
   <td>{{i + 1}}</td>
   <td>{{item.name}}</td>
</tr>

구조적 지침 :

구조적 지시문은 요소를 마이크로 템플릿으로 추가 및 제거하여 HTML 문서의 레이아웃을 변경합니다. 구조 지시문을 사용하면과 같은 식의 결과에 따라 조건부로 콘텐츠를 추가 *ngIf할 수 있습니다 *ngFor.

일반적인 작업에 기본 제공 지시문을 사용할 수 있지만 사용자 지정 구조 지시문을 작성하면 응용 프로그램에 맞게 동작을 조정할 수 있습니다.

<p *ngIf="true">
  Expression is true and ngIf is true.
  This paragraph is in the DOM.
</p>
<p *ngIf="false">
  Expression is false and ngIf is false.
  This paragraph is not in the DOM.
</p>

구성 요소 :

구성 요소는 다른 곳에서 제공되는 콘텐츠에 의존하지 않고 자체 템플릿을 지정하는 지시문입니다. 구성 요소는 모든 지시문 기능에 액세스 할 수 있으며 여전히 호스트 요소가 있으며 입력 및 출력 속성 등을 정의 할 수 있지만 자체 콘텐츠도 정의합니다.

템플릿의 중요성을 과소 평가하는 것은 쉽지만 속성 및 구조적 지시문에는 한계가 있습니다. 지시문은 유용하고 강력한 작업을 수행 할 수 있지만 적용되는 요소에 대한 통찰력은별로 없습니다. 지시문은 ngModel데이터 나 요소의 용도에 관계없이 모든 데이터 모델 속성 및 모든 양식 요소에 적용 할 수있는 지시문 과 같은 범용 도구 일 때 가장 유용 합니다.

반대로 구성 요소는 템플릿의 내용과 밀접하게 연결되어 있습니다. 구성 요소는 템플릿의 HTML 요소에 적용되는 데이터 바인딩에서 사용할 데이터와 논리를 제공하며, 데이터 바인딩 식을 평가하는 데 사용되는 컨텍스트를 제공하고 지시문과 나머지 응용 프로그램 사이의 접착제 역할을합니다. 컴포넌트는 또한 큰 Angular 프로젝트를 관리 가능한 청크로 분할 할 수있는 유용한 도구입니다.

import { Component, Input } from '@angular/core';

import { Hero } from './hero';

@Component({
  selector: 'app-hero-child',
  template: `
    <h3>{{hero.name}} says:</h3>
    <p>I, {{hero.name}}, am at your service, {{masterName}}.</p>
  `
})
export class HeroChildComponent {
  @Input() hero: Hero;
  @Input('master') masterName: string;
}

공식 각도에서

Pro-Angular 책에서

— Fgul
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.