วิธีสร้างคำสั่งที่กำหนดเองในเชิงมุม

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

คำสั่งคืออะไร?

คำสั่งใน Angular เป็นโครงสร้างโค้ดพิเศษที่ออกแบบมาเพื่อมีอิทธิพลต่อการนำเสนอและการโต้ตอบขององค์ประกอบ HTML ด้วยวิธีการต่างๆ เช่น การแก้ไข Document Object Model (DOM) การเพิ่มตัวจัดการเหตุการณ์ หรือการควบคุมการมองเห็น คำสั่งเหล่านี้ช่วยให้นักพัฒนาสามารถจัดการอินเทอร์เฟซผู้ใช้ได้อย่างมีประสิทธิภาพโดยการระบุการเปลี่ยนแปลงที่ต้องการภายในไวยากรณ์ของเทมเพลตเอง

คำสั่งโครงสร้างใน Angular จะปรับเปลี่ยนเค้าโครงของ Document Object Model (DOM) ในขณะที่คำสั่งแอตทริบิวต์จะส่งผลต่อลักษณะการมองเห็นหรือฟังก์ชันการทำงานของแต่ละองค์ประกอบภายในเทมเพลต คำสั่งเหล่านี้นำเสนอวิธีการที่มีประสิทธิภาพในการเพิ่มขีดความสามารถของแอปพลิเคชัน Angular โดยอนุญาตให้นักพัฒนาปรับแต่งและจัดการมาร์กอัป HTML ได้อย่างง่ายดาย

ประโยชน์ของคำสั่ง

การใช้คำสั่งใน Angular มีข้อดีหลายประการ รวมถึงความยืดหยุ่นที่เพิ่มขึ้นและการควบคุมพฤติกรรมของส่วนประกอบ ตลอดจนการปรับปรุงระบบโมดูลาร์และการจัดระเบียบโค้ด ด้วยการใช้ประโยชน์จากคำสั่ง นักพัฒนาสามารถสร้างลักษณะการทำงานแบบกำหนดเองสำหรับส่วนประกอบที่ขยายไปไกลกว่าคุณลักษณะ HTML พื้นฐานหรือ hooks ของวงจรการใช้งาน ช่วยให้แสดงออกได้มากขึ้นและควบคุมการโต้ตอบ UI ได้อย่างละเอียด นอกจากนี้ คำสั่งยังช่วยให้สามารถห่อหุ้มและแยกข้อกังวลภายในแอปพลิเคชันได้ดีขึ้น ส่งเสริมการนำกลับมาใช้ใหม่และการบำรุงรักษาในส่วนต่างๆ ของโครงการ โดยรวมแล้ว คำสั่งมีบทบาทสำคัญในการกำหนดโครงสร้างและฟังก์ชันการทำงานของแอปพลิเคชัน Angular ทำให้นักพัฒนามีเครื่องมืออันทรงพลังในการสร้าง UI ที่ซับซ้อนและประสบการณ์ผู้ใช้ได้อย่างมีประสิทธิภาพ

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

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

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

การตั้งค่าแอปพลิเคชันเชิงมุมของคุณ

หากต้องการสร้างโปรเจ็กต์ Angular ให้รันคำสั่งต่อไปนี้ภายในเทอร์มินัลของคุณเพื่อติดตั้ง Angular Command Line Interface (CLI):

 npm install -g @angular/cli

เมื่อติดตั้ง Angular Command Line Interface (CLI) เราสามารถสร้างโปรเจ็กต์ Angular ได้โดยใช้คำสั่งต่อไปนี้:

 ng new custom-directives-app

การดำเนินการตามคำสั่งข้างต้นจะทำให้เกิดการสร้างแอปพลิเคชันเชิงมุมที่เรียกว่า"แอปคำสั่งที่กำหนดเอง"

การสร้างคำสั่งที่กำหนดเอง

ในการสร้างคำสั่งที่กำหนดเองในโปรเจ็กต์ Angular ขั้นแรกจะต้องสร้างไฟล์ TypeScript และกำหนดคลาสที่ตกแต่งด้วย Directive decorator

มัณฑนากร @Directive เป็นคุณสมบัติของ TypeScript ที่ช่วยให้สามารถสร้างคำสั่งที่กำหนดเองได้ ในการใช้ฟังก์ชันนี้ เราจะสร้างไฟล์ highlight.directive.ts ภายในไดเร็กทอรี src/app ภายในไฟล์นี้ เราจะสร้างคำสั่งแบบกำหนดเองที่เรียกว่า highlight

ตัวอย่างเช่น:

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

@Directive({
  selector: "[myHighlight]",
})
export class HighlightDirective {
  constructor() {}
}

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

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

การรวมคำสั่งภายในโครงสร้างเทมเพลตสามารถทำได้ดังนี้:

 <main>
 <p myHighlight>Some text</p>
</main>

การเพิ่มพฤติกรรมให้กับคำสั่ง

ในการจัดการ Document Object Model (DOM) โดยใช้คำสั่ง ขั้นแรกจะต้องสร้างคำสั่งดังกล่าว และรับอินสแตนซ์ของ ElementRef จากแพ็คเกจ @เชิงมุม/core ข้อมูลอ้างอิงนี้ทำหน้าที่เป็นวิธีการแนบลักษณะการทำงานกับองค์ประกอบภายในเทมเพลต

หากต้องการใช้ ElementRef ภายในคำสั่ง จะต้องรวมเข้ากับฟังก์ชันตัวสร้างของคำสั่งดังกล่าว ElementRef ทำหน้าที่เป็นการห่อหุ้มสำหรับองค์ประกอบดั้งเดิมที่ตั้งอยู่ภายในมุมมองเฉพาะ

แน่นอนว่า นี่คือภาพประกอบที่แสดงให้เห็นถึงกระบวนการแนบพฤติกรรมเข้ากับคำสั่งใน Angular:

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

@Directive({
    selector: "[myHighlight]"
})
export class HighlightDirective {
    constructor(private element: ElementRef) {
        this.element.nativeElement.style.backgroundColor = 'lightblue';
    }
}

ตัวสร้างของคลาส HighlightDirective ยอมรับพารามิเตอร์ ElementRef ซึ่ง Angular จัดหาให้โดยอัตโนมัติ ElementRef นี้ให้สิทธิ์การเข้าถึงองค์ประกอบ DOM ที่เกี่ยวข้อง

การใช้คุณสมบัติ this.element.nativeElement เราสามารถเข้าถึงองค์ประกอบ DOM ดั้งเดิมที่แสดงโดยพารามิเตอร์ องค์ประกอบ ต่อจากนั้น ด้วยการใช้คุณสมบัติ style ก็เป็นไปได้ที่จะกำหนดเฉดสีฟ้าอ่อนเป็นสีพื้นหลังสำหรับส่วนประกอบที่เป็นปัญหา ดังนั้น องค์ประกอบใดๆ ก็ตามที่ใช้คำสั่ง myHighlight จะแสดงพื้นหลังเป็นสีฟ้า

เพื่อให้คำสั่งทำงานได้ จำเป็นอย่างยิ่งที่คุณจะต้องนำเข้าและประกาศอย่างชัดเจนถึงการมีอยู่ของคำสั่งภายในไฟล์ app.module.ts

ตัวอย่างเช่น:

 import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HighlightDirective } from './highlight.directive';

@NgModule({
  declarations: [
    AppComponent,
    HighlightDirective,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

ตอนนี้คุณสามารถใช้คำสั่ง myHighlight กับองค์ประกอบที่เป็นส่วนประกอบภายในส่วนประกอบเชิงมุมของคุณได้แล้ว

 <main>
 <p myHighlight>Some text</p>
</main>

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

 ng serve

เมื่อดำเนินการตามคำสั่งที่กำหนด กรุณานำเบราว์เซอร์อินเทอร์เน็ตของคุณไปที่ “ http://localhost:4200/ ” เพื่อเข้าถึงอินเทอร์เฟซผู้ใช้ซึ่งมีความคล้ายคลึงกับภาพที่เห็น การแสดงภาพด้านล่าง

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

หากต้องการแก้ไขพฤติกรรมของคำสั่ง highlight ใน Angular เราสามารถแทนที่เนื้อหาของไฟล์ highlight.directive.ts ด้วยเทมเพลตที่ให้มาได้ ซึ่งจะส่งผลให้มีการแสดงผลองค์ประกอบ HTML ที่แตกต่างกันซึ่งตรงกับตัวเลือกของคำสั่ง

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

@Directive({
    selector: "[myHighlight]"
})

export class HighlightDirective {
    @Input() set myHighlight(color: string) {
        this.element.nativeElement.style.backgroundColor = color;
    }

    constructor(private element: ElementRef) {
     }
}

รหัสที่ให้มาแสดงให้เห็นถึงการใช้งานคลาส HighlightDirective ใน Angular ซึ่งมีวิธีการ setter ที่ระบุว่าเป็น’myHighlight’วิธีการดังกล่าวยอมรับพารามิเตอร์อินพุตเดี่ยวของสตริงประเภทข้อมูล และตกแต่งด้วยตัวตกแต่งอินพุต ซึ่งช่วยให้สามารถรับค่าสีดังกล่าวจากส่วนประกอบที่ดูแลได้

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

ตัวอย่างเช่น:

 <main>
 <p myHighlight='pink'>Some text</p>
</main>

การสร้างคำสั่งโครงสร้างที่กำหนดเอง

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

Angular มีคำสั่งโครงสร้างพื้นฐานสองคำสั่ง ได้แก่ ngFor และ ngIf แบบแรกวนซ้ำผ่านอาร์เรย์ของรายการและแสดงเทมเพลตที่เกี่ยวข้องสำหรับแต่ละองค์ประกอบ ในขณะที่แบบหลังมีหน้าที่รับผิดชอบในการแสดงผลองค์ประกอบตามเงื่อนไขตามเกณฑ์เฉพาะ

ในส่วนนี้ เราจะพัฒนาคำสั่งโครงสร้างที่ออกแบบเฉพาะซึ่งแสดงการทำงานที่คล้ายคลึงกับคำสั่ง ngIf เพื่อให้บรรลุเป้าหมายนี้ เราจะสร้างไฟล์ condition.directive.ts

ในไฟล์ Condition.directive.ts ให้เขียนโค้ดนี้:

 import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core'

@Directive({
    selector: "[condition]"
})

export class ConditionDirective {

    @Input() set condition(arg: boolean) {
        if(arg) {
            this.viewContainer.createEmbeddedView(this.template)
        } else {
            this.viewContainer.clear();
        }
    }

    constructor(
 private template: TemplateRef<unknown>,

private viewContainer: ViewContainerRef

) {}
}

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

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

ConditionDirective ใช้นิพจน์แบบมีเงื่อนไขซึ่งนำไปใช้ผ่านคำสั่ง if-else เพื่อประเมินข้อดีของอาร์กิวเมนต์ที่ได้รับ หากอินพุตดังกล่าวพิสูจน์ได้ว่าถูกต้อง โครงสร้างจะสร้างเปอร์สเปคทีฟแบบปิดโดยใช้เทมเพลตการออกแบบที่ระบุด้วยความช่วยเหลือของวิธีการ createEmbeddedView() ที่มีอยู่ใน ViewContainerRef ต่อจากนั้น ฟังก์ชัน renderView() ที่เกี่ยวข้องกับอินสแตนซ์คอนเทนเนอร์นี้จะประสานการรวมมุมมองที่สร้างขึ้นใหม่ภายใน Document Object Model (DOM) ของเบราว์เซอร์

หากไม่ตรงตามเงื่อนไขที่ระบุ คำสั่งจะใช้เมธอด clear() ของ ViewContainerRef เพื่อลบการเรนเดอร์ก่อนหน้าทั้งหมดภายในคอนเทนเนอร์มุมมองออกจากเอกสาร

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

การรวมส่วนขยายภายในเทมเพลตสามารถทำได้โดยการรวมข้อมูลโค้ดที่ให้มา ดังที่แสดงด้านล่าง:

 <main>
 <p *condition="true">Hello There!!!</p>
</main>

ตอนนี้คุณสามารถสร้างคำสั่งที่กำหนดเองได้

คำสั่งที่กำหนดเองของ Angular นำเสนอวิธีการเสริมศักยภาพในการมีอิทธิพลต่อ Document Object Model (DOM) และเพิ่มฟังก์ชันการทำงานแบบไดนามิกภายในโครงสร้างเทมเพลต หลังจากทำความคุ้นเคยกับการสร้างและการประยุกต์ใช้แอตทริบิวต์ที่กำหนดเองและคำสั่งเชิงโครงสร้างแล้ว ตอนนี้คุณก็พร้อมที่จะใช้ประโยชน์จากศักยภาพของ Angular อย่างเต็มที่แล้ว