Dekorator metode bukan fitur eksklusif Angular. Fitur ini juga tersedia di es6. Artikel ini terutama memperkenalkan penggunaan dekorator metode di Angular. [Rekomendasi tutorial terkait: "tutorial sudut"]
Di es6, dekorator (Decorator) adalah sintaks yang terkait dengan kelas (kelas), digunakan untuk membubuhi keterangan atau memodifikasi kelas dan metode kelas; selama kompilasi, sintaks "@nama fungsi" biasanya ditempatkan sebelum definisi kelas dan metode kelas. Ada dua jenis dekorator: dekorator kelas dan dekorator metode kelas.
Di Angular, dekorator yang paling umum adalah dekorator kelas @Component, dan kita juga dapat menambahkan dekorator ke metode:
Dekorator adalah sebuah fungsi. Dekorator metode dapat digunakan untuk memantau, memodifikasi, atau mengganti definisi suatu
metode.telah disebutkan di atas definisi suatu metode. Dengan cara ini, kita dapat secara fleksibel menggunakan lapisan enkapsulasi yang membawa kita untuk melakukan banyak hal.
Yang paling umum adalah verifikasi. Kita dapat merangkum metode melalui lapisan ini untuk melakukan verifikasi izin terpadu. Dengan cara ini, jika Anda perlu menambahkan verifikasi izin ke suatu metode, Anda hanya perlu menambahkan dekorator metode ini alih-alih Ulangi untuk menggantinya. metode verifikasi.
Atau dapat berupa jendela pop-up terpadu atau pemrosesan cepat. Untuk berbagai metode, pemrosesan cepat terpadu dapat dilakukan setelah eksekusi, sehingga dekorator metode dapat ditambahkan untuk pemrosesan terpadu.
Secara keseluruhan, tujuan dekorator metode adalah untuk merangkum logika terpadu dari beberapa metode sehingga metode tersebut dapat digunakan kembali saat diperlukan selama setiap pemanggilan metode.
CaraDekorator terutama memiliki tiga parameter input
import { Component, OnInit } from '@angular/core';
log fungsi(target: apa saja, kunci: string, deskriptor: apa saja) {
konsol.log(target);
console.log(kunci);
console.log(deskriptor);
}
@Komponen({
pemilih: 'uji-aplikasi',
templateUrl: './fn-test.component.html',
styleUrls: ['./fn-test.component.scss']
})
kelas ekspor FnTestComponent mengimplementasikan OnInit {
konstruktor() {} }
ngOnInit(): batal {
ini.bayar(2,3)
}
@log
bayar(Harga: angka, hitungan: angka): angka {
harga pengembalian*hitungan
}
} 
Dan dekorasi metode dapat dibagi menjadi dua jenis, satu adalah dekorator metode yang meneruskan parameter, dan yang lainnya adalah dekorator metode yang tidak meneruskan parameter.
Ada atribut descriptor.value di deskriptor properti, yang merupakan metode yang didekorasi. Melalui metode ini, kita bisa mendapatkan parameter yang diteruskan dan hasil eksekusi fungsi:
function log(target: any, key: string, deskriptor: apa saja) {
biarkan metode = deskriptor.nilai;
deskriptor.nilai = fungsi (...args: any[]) {
hasil var: any = method.apply(this, args);
console.log(`metode：${key}, args：${JSON.stringify(args)}, return：${result}`);
hasil pengembalian;
}
} Dalam hal meneruskan parameter, kita perlu membungkus lapisan lain di luar fungsi sebelumnya. Fungsi luar bisa mendapatkan nilai yang diteruskan, dan fungsi yang dikembalikan oleh lapisan dalam sama dengan yang sebelumnya tanpa parameter. Jika Anda ingin menggunakan fungsi tersebut, Anda bisa mendapatkan tiga parameter:
function log(nowTime: Date) {
console.log(sekarangWaktu);
fungsi pengembalian(target: apa saja, kunci: string, deskriptor: apa saja){
biarkan metode = deskriptor.nilai;
deskriptor.nilai = fungsi (...args: any[]) {
hasil var: any = method.apply(this, args);
console.log(`metode：${key}, args：${JSON.stringify(args)}, return：${result}`);
hasil pengembalian;
}
}
}
kelas ekspor FnTestComponent mengimplementasikan OnInit {
...
@log(Tanggal baru())
bayar(Harga: angka, hitungan:angka): angka { harga pengembalian*hitungan
}
}
// Sel 07 Jun 2022 18:48:22 GMT+0800 (Waktu Standar Tiongkok)
// fn-test.component.ts:9 metode: pay, args: [2,3], return: 6 Melalui dekorator metode, kita dapat melakukan pemrosesan logis terpadu pada metode di dalam kelas, yang dapat mengurangi banyak hal yang tidak perlu duplikasi kode juga dapat membuat metode ini lebih sederhana dan sangat mengurangi biaya pengembangan sekunder selanjutnya.