@Directive vs @Component เป็น Angular

ความแตกต่างระหว่าง@Componentและ@Directiveในเชิงมุมคืออะไร? ทั้งคู่ดูเหมือนจะทำงานเดียวกันและมีคุณสมบัติเหมือนกัน

กรณีการใช้งานคืออะไรและควรเลือกใช้อีกกรณีหนึ่ง?

@Component ต้องการมุมมองในขณะที่ @Directive ไม่

directives

ฉันเปรียบเสมือน @Directive ถึง Angular 1.0 directive พร้อมตัวเลือกrestrict: 'A' (คำสั่งไม่ จำกัด เฉพาะการใช้งานแอตทริบิวต์) Directives เพิ่มลักษณะการทำงานให้กับองค์ประกอบ DOM ที่มีอยู่หรืออินสแตนซ์ขององค์ประกอบที่มีอยู่ ตัวอย่างการใช้กรณีหนึ่งสำหรับคำสั่งคือการบันทึกการคลิกบนองค์ประกอบ

import {Directive} from '@angular/core';

@Directive({
    selector: "[logOnClick]",
    hostListeners: {
        'click': 'onClick()',
    },
})
class LogOnClick {
    constructor() {}
    onClick() { console.log('Element clicked!'); }
}

ซึ่งจะใช้เช่นนั้น:

<button logOnClick>I log when clicked!</button>

ส่วนประกอบ

องค์ประกอบแทนที่จะเพิ่ม / ปรับเปลี่ยนพฤติกรรมจะสร้างมุมมองของตัวเอง (ลำดับชั้นขององค์ประกอบ DOM) ด้วยพฤติกรรมที่แนบมา ตัวอย่างการใช้กรณีนี้อาจเป็นส่วนประกอบของบัตรข้อมูลที่ติดต่อ:

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

@Component({
  selector: 'contact-card',
  template: `
    <div>
      <h1>{{name}}</h1>
      <p>{{city}}</p>
    </div>
  `
})
class ContactCard {
  @Input() name: string
  @Input() city: string
  constructor() {}
}

ซึ่งจะใช้เช่นนั้น:

<contact-card [name]="'foo'" [city]="'bar'"></contact-card>

ContactCardเป็นส่วนประกอบ UI ที่สามารถใช้ซ้ำได้ซึ่งเราสามารถใช้ได้ทุกที่ในแอปพลิเคชันของเราแม้จะอยู่ในส่วนประกอบอื่น ๆ โดยพื้นฐานแล้วสิ่งเหล่านี้ประกอบเป็นหน่วยการสร้าง UI ของแอปพลิเคชันของเรา

สรุป

เขียนส่วนประกอบเมื่อคุณต้องการสร้างชุด DOM องค์ประกอบของ UI ที่สามารถนำกลับมาใช้ใหม่ได้พร้อมกับพฤติกรรมที่กำหนดเอง เขียนคำสั่งเมื่อคุณต้องการเขียนพฤติกรรมการใช้ซ้ำเพื่อเสริมองค์ประกอบ DOM ที่มีอยู่

แหล่งที่มา:

• @ เอกสารกำกับ
• @ เอกสารประกอบของผู้ใช้
• บล็อกโพสต์ที่เป็นประโยชน์

ส่วนประกอบ

1. ในการลงทะเบียนส่วนประกอบเราใช้@Componentคำอธิบายประกอบ meta-data
2. Component เป็นคำสั่งที่ใช้เงา DOM เพื่อสร้างพฤติกรรมการมองเห็นแบบห่อหุ้มที่เรียกว่าส่วนประกอบ โดยทั่วไปจะใช้ส่วนประกอบในการสร้างวิดเจ็ต UI
3. ส่วนประกอบถูกใช้เพื่อแยกแอปพลิเคชันออกเป็นส่วนประกอบที่เล็กลง
4. สามารถมีได้เพียงหนึ่งองค์ประกอบต่อองค์ประกอบ DOM
5. @View เทมเพลตมัณฑนากรหรือเทมเพลตมีผลบังคับใช้ในส่วนประกอบ

คำสั่ง

1. ในการลงทะเบียนคำสั่งเราใช้@Directiveคำอธิบายประกอบ meta-data
2. Directive ใช้เพื่อเพิ่มพฤติกรรมให้กับองค์ประกอบ DOM ที่มีอยู่
3. Directive ใช้เพื่อออกแบบส่วนประกอบที่สามารถใช้งานซ้ำได้
4. คำสั่งจำนวนมากสามารถใช้ต่อองค์ประกอบ DOM
5. Directive ไม่ได้ใช้มุมมอง

แหล่งที่มา:

http://www.codeandyou.com/2016/01/difference-between-component-and-directive-in-Angular2.html

ส่วนประกอบคือคำสั่งพร้อมกับแม่แบบและ@Componentมัณฑนากรเป็นจริง@Directiveมัณฑนากรขยายด้วยคุณสมบัติที่มุ่งเน้นแม่แบบ

ใน Angular 2 ขึ้นไป“ ทุกอย่างเป็นองค์ประกอบ” ส่วนประกอบเป็นวิธีหลักที่เราสร้างและระบุองค์ประกอบและตรรกะบนหน้าผ่านทั้งองค์ประกอบที่กำหนดเองและคุณลักษณะที่เพิ่มฟังก์ชันการทำงานให้กับองค์ประกอบที่มีอยู่ของเรา

http://learnangular2.com/components/

แต่มีคำสั่งอะไรใน Angular2 +?

แอตทริบิวต์คำสั่งแนบพฤติกรรมกับองค์ประกอบ

มีคำสั่งสามประเภทในเชิงมุม:

1. ส่วนประกอบ - คำสั่งพร้อมด้วยแม่แบบ
2. คำสั่งโครงสร้าง - เปลี่ยนเค้าโครง DOM โดยการเพิ่มและลบองค์ประกอบ DOM
3. คุณสมบัติของคำสั่ง - เปลี่ยนรูปลักษณ์หรือพฤติกรรมขององค์ประกอบองค์ประกอบหรือคำสั่งอื่น

https://angular.io/docs/ts/latest/guide/attribute-directives.html

ดังนั้นสิ่งที่เกิดขึ้นใน Angular2 ขึ้นไปคือDirectivesคือคุณลักษณะที่เพิ่มฟังก์ชันการทำงานให้กับองค์ประกอบและส่วนประกอบส่วนประกอบ

ดูตัวอย่างด้านล่างจาก Angular.io:

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

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

ดังนั้นมันจะขยายองค์ประกอบและองค์ประกอบ HTML ของคุณด้วยการเพิ่มพื้นหลังสีเหลืองและคุณสามารถใช้งานได้ดังต่อไปนี้:

<p myHighlight>Highlight me!</p>

แต่ส่วนประกอบต่างๆจะสร้างองค์ประกอบที่สมบูรณ์พร้อมฟังก์ชั่นทั้งหมดดังนี้:

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

@Component({
  selector: 'my-component',
  template: `
    <div>Hello my name is {{name}}. 
      <button (click)="sayMyName()">Say my name</button>
    </div>
   `
})
export class MyComponent {
  name: string;
  constructor() {
    this.name = 'Alireza'
  }
  sayMyName() {
    console.log('My name is', this.name)
  }
}

และคุณสามารถใช้มันได้ด้านล่าง:

<my-component></my-component>

เมื่อเราใช้แท็กใน HTML ส่วนประกอบนี้จะถูกสร้างขึ้นและตัวสร้างจะถูกเรียกและแสดงผล

เปลี่ยนการตรวจจับ

เพียง แต่@Componentอาจจะเป็นโหนดในต้นไม้การตรวจสอบการเปลี่ยนแปลง ซึ่งหมายความว่าคุณไม่สามารถตั้งค่าในChangeDetectionStrategy.OnPush @Directiveแม้จะมีข้อเท็จจริงนี้คำสั่งสามารถมี@Inputและ@Outputคุณสมบัติและคุณสามารถฉีดและจัดการองค์ประกอบของโฮสต์ChangeDetectorRefจากมัน ดังนั้นใช้ส่วนประกอบเมื่อคุณต้องการการควบคุมที่ละเอียดกว่าโครงสร้างการตรวจจับการเปลี่ยนแปลงของคุณ

ในบริบทของการเขียนโปรแกรมคำสั่งให้คำแนะนำแก่คอมไพเลอร์เพื่อปรับเปลี่ยนวิธีการประมวลผลอินพุตหรือเปลี่ยนแปลงพฤติกรรมบางอย่าง

“ คำสั่งอนุญาตให้คุณแนบลักษณะการทำงานกับองค์ประกอบใน DOM”

คำสั่งถูกแบ่งออกเป็น 3 หมวดหมู่:

• คุณลักษณะ
• โครงสร้าง
• ตัวแทน

ใช่ใน Angular 2 Components เป็นประเภทของ Directive ตามเอกสาร

“ ส่วนประกอบเชิงมุมเป็นส่วนหนึ่งของคำสั่ง ไม่เหมือนกับคำสั่งส่วนประกอบจะมีแม่แบบเสมอและมีเพียงองค์ประกอบเดียวเท่านั้นที่สามารถสร้างอินสแตนซ์ต่อองค์ประกอบในแม่แบบได้”

คอมโพเนนต์ Angular 2 เป็นการใช้งานของแนวคิดWeb Component คอมโพเนนต์ของเว็บประกอบด้วยเทคโนโลยีแยกต่างหากหลายอย่าง คุณสามารถนึกถึง Web Components เป็นวิดเจ็ตส่วนต่อประสานผู้ใช้ที่สร้างขึ้นใหม่โดยใช้เทคโนโลยีเว็บเปิด

• ดังนั้นในคำสั่งสรุปกลไกที่เราแนบพฤติกรรมกับองค์ประกอบใน DOM ประกอบด้วยประเภทโครงสร้างแอตทริบิวต์และส่วนประกอบ
• ส่วนประกอบเป็นประเภทเฉพาะของคำสั่งที่ช่วยให้เราสามารถใช้ฟังก์ชั่นการใช้งานเว็บองค์ประกอบ AKA สามารถนำไปใช้ - องค์ประกอบที่ห่อหุ้มและนำมาใช้ซ้ำได้ตลอดทั้งแอปพลิเคชันของเรา

ถ้าคุณอ้างอิงเอกสารเชิงมุมอย่างเป็นทางการ

https://angular.io/guide/attribute-directives

มีคำสั่งสามประเภทในเชิงมุม:

1. ส่วนประกอบ - คำสั่งพร้อมด้วยแม่แบบ
2. คำสั่งโครงสร้าง - เปลี่ยนเค้าโครง DOM โดยการเพิ่มและลบองค์ประกอบ DOM เช่น * ngIf
3. คุณสมบัติของคำสั่ง - เปลี่ยนรูปลักษณ์หรือพฤติกรรมขององค์ประกอบองค์ประกอบหรือคำสั่งอื่น เช่น [ngClass]

เมื่อแอปพลิเคชันเติบโตขึ้นเราพบปัญหาในการบำรุงรักษารหัสเหล่านี้ทั้งหมด เพื่อวัตถุประสงค์ในการนำกลับมาใช้ใหม่เราแยกตรรกะของเราในส่วนประกอบอัจฉริยะและส่วนประกอบโง่และเราใช้คำสั่ง (โครงสร้างหรือคุณลักษณะ) เพื่อทำการเปลี่ยนแปลงใน DOM

ส่วนประกอบ

ส่วนประกอบเป็นโครงสร้างพื้นฐาน UI พื้นฐานที่สุดของแอพเชิงมุม แอปพลิเคชันเชิงมุมมีโครงสร้างของส่วนประกอบเชิงมุม โปรแกรมของเราในเชิงมุมถูกสร้างขึ้นบนต้นไม้องค์ประกอบ ทุกองค์ประกอบควรมีเทมเพลตสไตล์วงจรชีวิตตัวเลือก ฯลฯดังนั้นทุกองค์ประกอบมีโครงสร้างของมันคุณสามารถปฏิบัติต่อมันเป็นเว็บแอพพลิเคชั่นขนาดเล็กที่แยกจากกันพร้อมด้วยแม่แบบและตรรกะของตัวเองและความเป็นไปได้ในการสื่อสาร ส่วนประกอบ

ตัวอย่างไฟล์. ts สำหรับคอมโพเนนต์:

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

@Component({
    // component attributes
    selector: 'app-training',
    templateUrl: './app-training.component.html',
    styleUrls: ['./app-training.component.less']
})

export class AppTrainingComponent {
    title = 'my-app-training';
}

และ. /app.component.html มุมมองเทมเพลต:

Hello {{title}}

จากนั้นคุณสามารถแสดงเทมเพลต AppTrainingComponent ด้วยตรรกะในส่วนประกอบอื่น ๆ (หลังจากเพิ่มลงในโมดูล)

<div>
   <app-training></app-training>
</div>

และผลลัพธ์จะเป็น

<div>
   my-app-training
</div>

เนื่องจาก AppTrainingComponent ถูกแสดงที่นี่

ดูเพิ่มเติมเกี่ยวกับส่วนประกอบ

directives

คำสั่งจะเปลี่ยนลักษณะหรือพฤติกรรมขององค์ประกอบ DOM ที่มีอยู่ ตัวอย่างเช่น [ngStyle] เป็นคำสั่ง Directives สามารถขยายส่วนประกอบ (สามารถนำมาใช้ในพวกเขา) แต่พวกเขาไม่ได้สร้างแอพลิเคชันทั้งหมด สมมติว่าพวกเขาสนับสนุนองค์ประกอบ พวกเขาไม่มีเทมเพลตของตัวเอง (แต่แน่นอนว่าคุณสามารถจัดการเทมเพลตกับพวกเขาได้)

คำสั่งตัวอย่าง:

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {

  constructor(private el: ElementRef) { }

  @Input('appHighlight') highlightColor: string;

  @HostListener('mouseenter') onMouseEnter() {
    this.highlight(this.highlightColor || 'red');
  }

  private highlight(color: string) {
    this.el.nativeElement.style.backgroundColor = color;
  }
}

และการใช้งาน:

<p [appHighlight]="color" [otherPar]="someValue">Highlight me!</p>

ดูเพิ่มเติมเกี่ยวกับคำสั่ง