Cara Membuat Direktif Kustom di Angular

Salah satu fitur utama Angular adalah arahan. Arahan sudut adalah cara Anda menambahkan perilaku ke elemen DOM. Angular menyediakan berbagai arahan bawaan, dan Anda juga dapat membuat arahan khusus dalam kerangka kerja yang kuat ini.

Apa itu Petunjuk?

Arahan adalah kode khusus yang digunakan Angular untuk mengubah perilaku atau tampilan elemen HTML. Anda dapat menggunakan arahan untuk menambahkan pendengar acara, mengubah DOM, atau menampilkan atau menyembunyikan elemen.

Ada dua jenis arahan bawaan di Angular, struktural dan atribut. Arahan struktural mengubah struktur DOM, sedangkan arahan atribut mengubah tampilan atau perilaku suatu elemen. Arahan adalah cara ampuh untuk memperluas fungsionalitas komponen Angular.

Manfaat Petunjuk

Berikut beberapa manfaat menggunakan arahan di Angular:

• Dapat digunakan kembali: Anda dapat menggunakan arahan di beberapa komponen, sehingga menghemat waktu dan tenaga Anda.
instagram viewer
• Kemungkinan diperpanjang: Anda dapat memperluas arahan untuk menambahkan fungsionalitas baru, membuat komponen Anda lebih kuat.
• Fleksibilitas: Dengan menggunakan arahan, Anda dapat memodifikasi perilaku atau tampilan elemen dengan berbagai cara, sehingga memberi Anda banyak fleksibilitas saat membangun aplikasi.

Menyiapkan Aplikasi Sudut Anda

Untuk menyiapkan aplikasi Angular, instal Angular CLI dengan menjalankan kode berikut di terminal Anda:

npm install -g @angular/cli

Setelah menginstal Angular CLI, buat proyek Angular dengan menjalankan perintah berikut:

ng new custom-directives-app

Menjalankan perintah di atas akan membuat proyek Angular bernama aplikasi arahan khusus.

Membuat Petunjuk Khusus

Sekarang Anda memiliki proyek Angular dan dapat mulai membuat arahan khusus Anda. Buat file TypeScript dan tentukan kelas yang dihiasi dengan @Pengarahan penghias.

Itu @Pengarahan dekorator adalah dekorator TypeScript yang digunakan untuk membuat arahan khusus. Sekarang buat a sorot.directive.ts berkas di src/aplikasi direktori. Dalam file ini, Anda akan membuat arahan khusus menyorot.

Misalnya:

import { Directive } from"@angular/core";
@Directive({
 selector: "[myHighlight]",
})
exportclassHighlightDirective{
constructor() {}
}

Blok kode di atas mengimpor Pengarahan dekorator dari @sudut/inti modul. Itu @Pengarahan dekorator menghiasi Petunjuk Sorotan kelas. Dibutuhkan objek sebagai argumen dengan a pemilih Properti.

Dalam hal ini, Anda menyetel pemilih properti ke [Sorotan saya] artinya Anda dapat menerapkan arahan ini ke templat Anda dengan menambahkan sorotan saya atribut ke suatu elemen.

Berikut ini contoh cara menggunakan direktif di templat Anda:

Some text</p>
</main>

Menambahkan Perilaku ke Petunjuk

Sekarang Anda telah berhasil membuat arahan. Langkah selanjutnya adalah menambahkan perilaku ke direktif sehingga bisa memanipulasi DOM. Anda akan membutuhkan ElemenRef dari @angular/core untuk menambahkan perilaku ke arahan.

Anda akan memasukkan ElementRef ke dalam konstruktor arahan. ElementRef adalah pembungkus elemen asli di dalam tampilan.

Berikut ini contoh bagaimana Anda menambahkan perilaku ke direktif:

import { Directive, ElementRef } from"@angular/core";
@Directive({
 selector: "[myHighlight]"
})
exportclassHighlightDirective{
constructor(private element: ElementRef) {
this.element.nativeElement.style.backgroundColor = 'lightblue';
 }
}

Dalam contoh ini, konstruktor dari Petunjuk Sorotan kelas mengambil parameter ElementRef, yang disuntikkan secara otomatis oleh Angular. ElementRef menyediakan akses ke elemen DOM yang mendasarinya.

Menggunakan ini.elemen.nativeElement properti, Anda mengakses elemen DOM asli dari elemen parameter. Anda kemudian mengatur warna latar belakang komponen menjadi biru muda menggunakan gaya Properti. Ini berarti elemen apa pun yang Anda terapkan sorotan saya arahan ke akan memiliki latar belakang biru muda.

Untuk membuat arahan berfungsi, pastikan Anda mengimpor dan mendeklarasikannya di aplikasi.modul.ts mengajukan.

Misalnya:

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]
})
exportclassAppModule{ }

Sekarang Anda dapat menerapkan direktif myHighlight ke elemen di komponen Angular Anda.

Some text</p>
</main>

Jalankan aplikasi Anda di server pengembangan untuk menguji apakah arahan tersebut berfungsi. Anda dapat melakukan ini dengan menjalankan perintah berikut di terminal Anda:

ng serve

Setelah menjalankan perintah, navigasikan ke http://localhost: 4200/ di browser web Anda, dan Anda akan melihat antarmuka seperti gambar di bawah.

Arahan bawaan sudut menerima nilai untuk mengubah tampilan elemen, tetapi arahan khusus sorotan saya tidak. Anda dapat mengonfigurasi arahan untuk menerima nilai yang akan digunakan untuk mengatur warna latar belakang templat secara dinamis.

Untuk melakukannya, ganti kode di sorot.directive.ts file dengan ini:

import { Directive, ElementRef, Input } from"@angular/core";
@Directive({
 selector: "[myHighlight]"
})
exportclassHighlightDirective{
 @Input() set myHighlight(color: string) {
this.element.nativeElement.style.backgroundColor = color;
 }
constructor(private element: ElementRef) { 
 }
}

Pada blok kode di atas, Petunjuk Sorotan kelas berisi metode penyetel yang disebut sorotan saya. Cara ini memerlukan a warna parameter dari tipe string. Anda mendekorasi metode penyetel dengan @Memasukkan dekorator, memungkinkan Anda meneruskan nilai warna ke dalam arahan dari komponen induk.

Sekarang Anda dapat menentukan warna latar belakang dengan meneruskan nilai ke direktif myHighlight.

Misalnya:

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

Membuat Petunjuk Struktural Kustom

Di bagian sebelumnya, Anda telah mempelajari cara membuat, menambahkan perilaku, dan menerapkan arahan atribut khusus ke templat Anda. Arahan atribut mengubah tampilan elemen DOM, sedangkan arahan struktural menambah, menghapus, atau memindahkan elemen di DOM.

Angular memberikan dua arahan struktural, ngUntuk Dan ngJika. Arahan ngFor merender template untuk setiap item dalam koleksi (array), sedangkan ngJika menangani rendering bersyarat.

Di bagian ini, Anda akan membuat arahan struktural khusus yang berfungsi seperti ngJika pengarahan. Untuk melakukan ini, buat a kondisi.arahan.ts mengajukan.

Dalam kondisi.arahan.ts file, tulis kode ini:

import { Directive, Input, TemplateRef, ViewContainerRef } from'@angular/core'
@Directive({
 selector: "[condition]"
})
exportclassConditionDirective{
 @Input() set condition(arg: boolean) {
if(arg) {
this.viewContainer.createEmbeddedView(this.template)
 } else {
this.viewContainer.clear();
 }
 }
constructor(
 private template: TemplateRef, 
 private viewContainer: ViewContainerRef 
 ) {}
}

Blok kode ini memungkinkan Anda merender elemen secara kondisional dengan menerapkan kondisi arahan ke elemen dan meneruskan nilai boolean dari komponen induk.

Di konstruktor Petunjuk Kondisi kelas, Anda menyuntikkan sebuah instance TemplatRef Dan LihatContainerRef. TemplateRef mewakili templat yang terkait dengan arahan, dan ViewContainerRef mewakili wadah tempat aplikasi merender tampilan.

Metode penyetel kelas ConditionDirective menggunakan pernyataan if else untuk memeriksa parameter arg. Arahan tersebut membuat tampilan tersemat menggunakan templat yang disediakan jika parameternya benar. Itu buat Tampilan Tertanam metode kelas ViewContainerRef membuat dan merender tampilan di DOM.

Jika parameternya adalah PALSU, arahan menghapus wadah tampilan menggunakan jernih metode kelas ViewContainerRef. Tindakan ini akan menghapus semua tampilan yang dirender sebelumnya dari DOM.

Setelah membuat direktif, daftarkan di proyek Anda dengan mengimpor dan mendeklarasikannya di file aplikasi.modul.ts mengajukan. Setelah melakukan ini, Anda dapat mulai menggunakan arahan di templat Anda.

Berikut ini contoh cara menggunakannya di templat Anda:

"true">Hello There!!!</p>
</main>

Sekarang Anda Dapat Membuat Petunjuk Khusus

Arahan khusus di Angular menyediakan cara ampuh untuk memanipulasi DOM dan menambahkan perilaku dinamis ke templat Anda. Anda telah mempelajari cara membuat dan menerapkan atribut khusus dan arahan struktural dalam aplikasi Angular Anda. Dengan memahami cara membuat dan menggunakan arahan khusus, Anda dapat memanfaatkan sepenuhnya kemampuan Angular.