ฉันเพิ่งเริ่มทำงานกับ Angular 2

ฉันสงสัยว่าส่วนประกอบและคำสั่งใน Angular 2 แตกต่างกันอย่างไร

โดยทั่วไปมีคำสั่งสามประเภทใน 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>

สำหรับข้อมูลเพิ่มเติมคุณสามารถอ่านบทแนะนำอย่างเป็นทางการได้ที่นี่และที่นี่

คอมโพเนนต์มีมุมมองของตัวเอง (HTML และสไตล์) คำสั่งเป็นเพียง "พฤติกรรม" ที่เพิ่มเข้าไปในองค์ประกอบและส่วนประกอบที่มีอยู่ ขยาย
ComponentDirective

ด้วยเหตุนี้จึงมีองค์ประกอบเดียวในองค์ประกอบโฮสต์ แต่มีหลายคำสั่ง

คำสั่งโครงสร้างเป็นคำสั่งที่ใช้กับ<template>องค์ประกอบและใช้เพื่อเพิ่ม / ลบเนื้อหา (ประทับตราแม่แบบ) *ในการใช้งานคำสั่งเช่น*ngIfทำให้เกิดการ<template>แท็กที่จะสร้างขึ้นโดยปริยาย

เพื่อให้สิ่งที่Günterพูดเราสามารถแยกแยะคำสั่งได้สองประเภท:

• คนโครงสร้างที่ปรับปรุงรูปแบบ DOM โดยการเพิ่มหรือลบองค์ประกอบ สองคนที่พบบ่อยคือNgForและNgIf. สิ่งเหล่านี้เชื่อมโยงกับแนวคิดเทมเพลตและต้องนำหน้าด้วย*ไฟล์. ดูส่วน "เทมเพลตและ *" ในลิงก์นี้สำหรับรายละเอียดเพิ่มเติม: http://victorsavkin.com/post/119943127151/angular-2-template-syntax
• คนแอตทริบิวต์ที่ปรับปรุงพฤติกรรมของการปรากฏตัวขององค์ประกอบที่พวกเขาจะติดอยู่คนหนึ่ง

หวังว่ามันจะช่วยคุณ Thierry

นี่คือคำจำกัดความที่แท้จริง

• หากมีเทมเพลตแสดงว่าเป็นส่วนประกอบ
• มิฉะนั้นหากมีตัวเลือกในวงเล็บ "[likethis]" แสดงว่าเป็นAttribute Directive
• อื่นมันเป็นโครงสร้าง Directive

คำจำกัดความอื่นใดไม่ถูกต้อง

สรุป:

ส่วนประกอบคือคำสั่งที่มีมุมมองที่เกี่ยวข้อง (เช่น HTML ที่จะแสดงผล) ส่วนประกอบทั้งหมดเป็นคำสั่ง แต่ไม่ใช่คำสั่งทั้งหมดที่เป็นส่วนประกอบ คำสั่งมีสามประเภท:

• ส่วนประกอบ : มุมมองที่มีพฤติกรรมที่เกี่ยวข้อง คำสั่งประเภทนี้เพิ่มองค์ประกอบ DOM
• คำสั่งแอตทริบิวต์ : สามารถแนบกับองค์ประกอบ DOM (และส่วนประกอบเนื่องจากเป็นองค์ประกอบ DOM) เพื่อแก้ไขลักษณะหรือพฤติกรรมขององค์ประกอบ
• คำสั่งโครงสร้าง : สามารถแนบกับองค์ประกอบ DOM (และส่วนประกอบเนื่องจากเป็นองค์ประกอบ DOM) เพื่อแก้ไขโครงร่าง DOM คำสั่งโครงสร้างเริ่มต้นด้วย * และเพิ่มหรือลบองค์ประกอบ DOM ตัวอย่างเช่น*ngIfซึ่งสามารถแทรกหรือลบองค์ประกอบ DOM (หรือองค์ประกอบเชิงมุมซึ่งเป็นองค์ประกอบ 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>จะแสดงเงื่อนไขขึ้นอยู่กับว่าการแสดงออกสามารถบังคับให้myBooltrue

Angular 2 เป็นไปตามส่วนประกอบ / รูปแบบบริการของสถาปัตยกรรม

แอปพลิเคชั่นเชิงมุม 2 ทำจากส่วนประกอบ คอมโพเนนต์คือการรวมกันของเทมเพลต HTML และคลาสคอมโพเนนต์ (คลาส A typescript) ที่ควบคุมส่วนหนึ่งของหน้าจอ

สำหรับแนวทางปฏิบัติที่ดีคลาสองค์ประกอบจะใช้สำหรับการเชื่อมโยงข้อมูลกับมุมมองที่เกี่ยวข้อง การผูกข้อมูลสองทางเป็นคุณสมบัติที่ยอดเยี่ยมจากกรอบเชิงมุม

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

ส่วนประกอบยังเป็นคำสั่งชนิดหนึ่งที่มีเทมเพลต

อีกสองคำสั่งคือ

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 แอตทริบิวต์ directive

<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 ในเทมเพลตซึ่งจัดเตรียมบริบทที่ใช้ในการประเมินนิพจน์การผูกข้อมูลและทำหน้าที่เป็นกาวระหว่างคำสั่งและส่วนที่เหลือของแอปพลิเคชัน ส่วนประกอบยังเป็นเครื่องมือที่มีประโยชน์ในการช่วยให้โปรเจ็กต์เชิงมุมขนาดใหญ่แบ่งออกเป็นชิ้นส่วนที่จัดการได้

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