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

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

저는 이제 막 Angular 2로 작업을 시작했습니다.

Angular 2의 컴포넌트와 디렉티브의 차이점이 무엇인지 궁금합니다.

설명서에 따르면 Angular2에는 기본적으로 세 가지 유형의 지시어가 있습니다.

• 요소
• 구조 지침
• 속성 지시어

요소

또한 Angular2에서 가장 유명한 유형의 디렉티브 중 하나인 템플릿, 스타일 및 로직 파트가 포함된 디렉티브 유형입니다.된 지시문이든 할 수 .@Component다음과 같은 주석:

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

보기에서 이 지시문을 다음과 같이 사용합니다.

<my-app></my-app>

구성 요소 지침에 대한 최상의 튜토리얼을 여기서 찾았습니다.

구조 지침

맘에 들다*ngFor그리고.*ngIfDOM 요소를 추가 및 제거하여 DOM 레이아웃을 변경하는 데 사용됩니다.여기에 설명된

속성 지시어

일부 기능/논리를 적용하여 기존 요소에 사용자 지정 동작 또는 스타일을 제공하는 데 사용됩니다.맘에 들다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>

자세한 내용은 여기와 여기에서 공식 튜토리얼을 읽을 수 있습니다.

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

따라서 호스트 요소에는 하나의 구성 요소만 있을 수 있고 여러 개의 지시어가 있을 수 있습니다.

▁to다ives▁applied▁struct에 적용되는 지시어입니다.<template>내용 추가/제거에 사용됩니다(템플릿 스탬프).* 은 지 응 서에램프로그용시와 같은 지시 에서.*ngIf원인이 됩니다.<template>암묵적으로 생성할 태그입니다.

여기 실제 정의가 있습니다.

• 템플릿이 있는 경우 구성요소입니다.
• 그렇지 않으면 괄호 안에 "[이렇게] 선택기가 있으면 속성 지시어입니다.
• 그렇지 않으면 구조 지침입니다.

다른 정의는 틀렸습니다.

귄터가 말한 것을 완성하기 위해, 우리는 두 종류의 지시어를 구별할 수 있습니다.

• 요소를 추가하거나 제거하여 DOM 레이아웃을 업데이트하는 구조입니다.두 가지 공통점은NgFor그리고.NgIf이들은 템플릿 개념에 연결되어 있으며 다음과 같이 접두사로 붙어야 합니다.*자세한 내용은 다음 링크의 "템플릿 및 *" 섹션을 참조하십시오. http://victorsavkin.com/post/119943127151/angular-2-template-syntax
• 연결된 요소의 모양 동작을 업데이트하는 속성입니다.

도움이 되길 바래, 티에리

요약:.

구성요소는 관련 보기(즉, 렌더링할 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>표시되는 요소, 안녕.
• Highlight 은 Highlight Directive 속성같다에 .<div>원소의이것은 그것이 그것의 행동을 조작할 것을 의미합니다.<div> 경우 .이 경우 텍스트가 강조 표시되고 노란색으로 바뀝니다.
• 지침은 다음과 같습니다.*ngIf는 에도있다니습에도 .<div>삽입 여부를 결정합니다.<div>표현식이 조건부로 표시되는지 여부에 따라myBool당할 수 있습니다.true.

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

각진 2 애플리케이션은 구성 요소로 이루어집니다.구성 요소는 HTML 템플릿과 화면의 일부를 제어하는 구성 요소 클래스(유형 스크립트 클래스)의 조합입니다.

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

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

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

다른 두 가지 지침은

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

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

실제로 구성요소도 지시사항이지만 구성요소 간에 차이가 있습니다.

속성 지시사항:

속성 지시어는 단일 요소의 동작이나 모양을 수정할 수 있는 클래스입니다.하려면 " " " " " " 을 합니다.@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 책에서

질문을 지시 유형 또는 관련 없는 것을 언급하는 것과 혼동하지 마십시오.여기에 있는 한 사람은 지침과 구성 요소 사이의 정확한 차이만 알고 싶어 합니다. 따라서 정확히 무엇인지 알려드리겠습니다.

지시문은 특정 기능을 수행하지만 TEMPLATE(html)를 포함하지 않는 재사용 가능한 코드 조각입니다. 인수나 콜백을 사용할 수 없습니다.

여기서 구성 요소는 동일하지만 자체 TEMPLE(html)을 가지고 있으며 동적 인수를 소품으로 사용하고 콜백할 수 있으며 이를 기반으로 동적 마크업을 생성할 수 있습니다.

둘 다 선택기의 이름과 함께 사용할 수 있습니다.

언급URL : https://stackoverflow.com/questions/34613065/what-is-the-difference-between-component-and-directive